Question

从书中可以看出：

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

突变必须始终是同步的。

从书中可以看出：

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

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

所以它是action - ＆gt; mutation - ＆gt; new state大部分时间都是。{/ p>

令我困惑的是，这是一个非常简单的例子，我试图显示对象的异步结果getTest

See this pen

为什么Vue在组件加载时不能看到我没有调用，而是 action ？

Answer 1

这是什么＆＃34;书＆＃34;你在说什么？我之所以问，是因为您使用了新的Vuex 2.*和旧的Vuex 1.*语法，这种语法在2.*中不再有效，所以我假设您正在学习部分来自过时的资源。

（旁注：你为什么使用Vue 1？Vue 2.*已经出现超过10个月了......）

您的操作和变异定义是正确的，但Vuex vuex: {}

2.*

此外，您正在尝试发送操作“INCREMENT”，但是您的商店只有该名称的突变，没有操作。因此，您必须使用commit而不是dispatch。

相反，您直接将计算出的道具和方法添加到您的实例，或使用Vuex提供的map*帮助程序：

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正在代码中执行
从此操作调用的提交未设置任何状态。

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

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

在简单的VueJS测试中与Vuex提交/调度混淆

1 个答案: