问题 '[vuex] 不改变 vuex 存储状态外的变异处理程序问题，当我扩展' 组件 [英] issue '[vuex] do not mutate vuex store state outside mutation handlers problem when i extend' component

问题描述

我在 vue 文件中使用了 vuex 存储

i used vuex store in a vue file

// a.vue
// use mapGetters
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      appSize: "view/appSize"
    })
  }
}

// appSize is accessed elsewhere, and no actions operation

效果很好

================

===============

但是当我扩展此组件并为其设置一个新的动态名称时:

but when i extend this component, and set it a new dynamic name:

// layout.vue

const allViewPages = {};
let requireViewComponent = require.context(
  "src/pages",
  true,
  /Page.*\.vue$/
);
requireViewComponent.keys().forEach(fn => {
  let comp = requireViewComponent(fn);
  let key = fn.replace(/^\.\/(.*)\.\w+$/, "$1");

  const origin = comp.default;
  origin.data["origin"] = true;
  const proto = Vue.extend(origin);
  allViewPages[key] = proto;
});

function switchView(vm, to) {
  const original = allViewPages[to.uri];

  this.permittedPageViews.push(dynamicName);
  vm.pageView = original.extend({
    name: dynamicName, // a random name for a same vue file component
    data: function() {
      return to.args || {}; // arguments
    }
  });
}

vm.pageView 是布局文件数据，用于:

vm.pageView is layout file data, for:

// layout.vue

<keep-alive :include="permittedPageViews">
  <component :is="pageView" />
</keep-alive>

然后我得到错误:[vuex] 不要在变异处理程序之外改变 vuex 存储状态.

我修改了布局文件中的任何数据值，出现此错误

i modify any of the data value in layout file, i get this error

推荐答案

您不能在 mutation 之外更改 vuex 存储中的数据.所以每次你想改变 store 中的值时，你需要为它创建一个 mutation，并从你的组件中调用它.有关更多信息，您可以查看 vuex 突变文档

You can not change data from vuex store outside a mutation. so every time you want to change the value from the store, you need to create a mutation for it, and call it from your component. for more information you can see vuex mutations docs

这篇关于问题 '[vuex] 不改变 vuex 存储状态外的变异处理程序问题，当我扩展' 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！