Vuex的一个易错点

  好长时间不用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等。

 

 

posted @ 2019-03-13 11:27  姜瑞涛  阅读(152)  评论(0编辑  收藏  举报