在简单的 VueJS 测试中对 Vuex 提交/调度感到困惑

Question

从书中：

要调用 mutation handler，您需要调用 store.commit，其类型为：store.commit('increment')

突变必须始终是同步的。

---

从书中：

动作提交突变（可以是异步的）

Actions are triggered 使用 store.dispatch 方法：store.dispatch('increment')

所以大部分时间是action -> mutation -> new state。

所以让我感到困惑的是一个非常简单的例子，我试图显示对象getTest的异步结果

See this pen

为什么 Vue 在组件加载时看不到我不是在调用突变，而是在调用一个动作？

Answer 1

你说的这本“书”是什么？我之所以问，是因为您混合使用了新的 Vuex 2.* 和旧的 Vuex 1.* 语法，这在 2.* 中不再适用，所以我假设您部分地从过时的资源中学习。

（旁注：你为什么使用 Vue 1？Vue2.* 已经发布了 10 多个月了......）

• 您的动作和突变定义是正确的，但是在 Vuex 2.* 中没有 vuex: {} 组件中的键
• 另外，您正在尝试调度一个操作“INCREMENT”，但您的商店只有该名称的突变，没有操作。所以你必须使用commit 而不是dispatch。

相反，您可以直接将计算的 props 和方法添加到您的实例中，或者使用 Vuex 提供的 map*helpers：

var vm = new Vue({
  el: '[vue=app]',
  data: {
    welcome: 'Testing Vuex'
  },
  store: myStore,
  created() {
    this.$store.dispatch(FETCH_TEST_STATE)
  },
  computed: {
    ...Vuex.mapState( {
      count: state => state.count,
      getTest: state => state.testState
    }),
  }
  methods: {
   increment({dispatch}) {
     this.$store.commit('INCREMENT', 1)
   }
  }
})

• 您从 created 调用的操作不起作用，因为 async/await 正在对 codepen 执行操作
• 从此操作调用的提交未设置任何状态。

解决所有这些问题，这是您的工作示例：

https://codepen.io/LinusBorg/pen/NvRYYy?editors=1010