Vuex的一个易错点

最新推荐文章于 2024-11-08 14:35:14 发布

weixin_30408675

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhansu/p/10521973.html

版权

　　好长时间不用Vuex，发现有些东西记模糊了。

　　在对Vuex进行模块化开发的时候，

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

　　我们可以通过store.state.a取得 moduleA 的状态，在store注入到vue实例的时候，子组件可以通过this.$store.state.a取得。但要注意的是，这是在vue组件里可以这样使用。我们在构建store仓库的时候，是无法使用this.$store的，因为组件里的this指向的是vue实例，而store仓库的this并不指向vue实例。

const actions = {
  increment: ({ commit }) => {
    console.log(this)  // 这是错误用法
    console.log($store)  // 这是错误用法
    commit('increment')
  },
  decrement: ({ commit }) => commit('decrement')
}

　　因此，在store仓库里，我们getters、mutations和actions传参时，都要根据api说明的来获取可以获取的state, commit, rootState,getters。mutations只能获取局部的state，而actions不仅可以获取局部state还可以获取根节点的state（rootState），也可以dispatch等。

转载于:https://www.cnblogs.com/zhansu/p/10521973.html