Vuex 通俗版教程告诉你Vuex怎么用

转载自：https://www.jianshu.com/p/bc63633321be

import Vue from 'vue'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 

const store = new Vuex.Store({ 
       state: { count: 0 },
       mutations: {
            increment (state) { 
                state.count++ 
            } 
      }
 })

以上就是一个最简单的Vuex，每一个Vuex应用就是一个store，在store中包含组件中的共享状态state和改变状态的方法（暂且称作方法）mutations。

vuex的核心是：state,getter,actions,mutations

1、state

state就是根据你项目的需求，自己定义的一个数据结构，里面可以放些通用的状态。

this.$store.state.openId = "111"

之前我一直通过上面的方式来修改state里面的状态值，行，肯定能用，但是好像官方并不建议我们这样使用，而是建议使用mutations来改变state里面的值，因为不通过mutations改变state，状态不会被同步。至于mutations下面会讲到。

2、getter

getter怎么理解呢？通俗的理解可以认为是getter里的函数就是vuex里的计算属性，类似于computed函数。

computed: {
     ...mapGetters{["countAdd"]} 
     show：function(){
           alert("这个是测试页面")
     }
}

这样我们可以直接在vue页面里取到countAdd的值{{countAdd}}即为1。可惜在我的项目里目前还没用到getter，可能写的少了，还没理解其中的要义。

3、mutations

官方定义：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

store.commit('increment')

也可以向store.commit传入第二参数，也就是mutation的payload:

mutation: { 
     increment (state, payload) { 
            state.totalPrice += payload.price + payload.count; 
     } 
} 
store.commit({
     type: 'increment', 
     price: 10, 
     count: 8
 })

不例外，mutations也有映射函数mapMutations，帮助我们简化代码，使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

如果我在vue页面里想用action，我们可以分发 Action，Action 通过 store.dispatch 方法触发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

我们也可以运用其映射函数：mapActions

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

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

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

总结起来：mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管（所有的改变state状态的都是mutation 来操作）；Getter 我只管取，我不改的（类似计算属性）。

关于vuex目前也就了解这么多，在实际项目中vuex用什么，怎么用，还需要灵活改变，以后慢慢摸索吧。上面的示例很多都是vuex文档上的，总结起来还是需要多看文档，在实际项目中运用，才是最好的办法吧。



作者：_littleTank_
链接：https://www.jianshu.com/p/bc63633321be
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

相关

标签