首页 文章

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

提问于
浏览 次
0

从书中：

要调用变异处理程序，您需要使用其类型调用store.commit：store.commit（'increment'）

突变必须始终是同步的 .

从书中：

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

使用store.dispatch方法触发操作：store.dispatch（'increment'）

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

那么's confusing me, is the very simple example, whereby I' m试图显示一个对象的异步结果 getTest

See this pen

为什么't Vue see that I' m不能调用变异，而是在组件加载时执行操作？

vue.js vuex

1 回答

  • 1

    你在说什么"book"？我问的是因为你使用了新的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

    回复于

相关问题