问题'[vuex] 不改变 vuex 存储状态外部突变处理程序问题时我扩展'组件

Question

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

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

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

// appSize is accessed elsewhere, and no actions operation

效果很好

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

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

// 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是布局文件数据，用于：

// layout.vue

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

然后我得到了错误： [vuex] do not mutate vuex store state outside mutation handlers.

我修改布局文件中的任何数据值，我得到这个错误

Answer 1

您不能更改来自vuex 存储在mutation 之外的数据。因此，每次您想从商店更改值时，都需要为它创建一个mutation，并从您的组件中调用它。更多信息可以查看vuex mutations docs