Vuex - 掘金

Vuex是专门为Vue.js开发的状态管理模式，Vue是组件化开发，在遇到组件通信时，会让我们有些头疼，但是Vuex就是解决了这种单项数据流的困扰。

当我们多个页面需要同一种状态是，一层一层下传有些许麻烦，Vuex将这种共享状态抽出来进行统一管理，任意组件都可以去触发。

Vuex的核心就是store，它包括：

state：

保存一些数据

vue组件中用this.$store.state.count调用
mutations：

写一些方法

vue组件中用this.$store.commit('mutationsAddCount',1)调用,第二个是可以传的参数
getters：

相当于state的计算属性，写一些计算state中的值

vue组件中用this.$store.getters.getterCount调用
actions：

写一些异步操作

vue组件中用this.$store.dispath('actionsAddCount',1)调用
modules：可以写多组store 1.state：这里保存着数据，

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    count: 0
}
const mutations = {
    mutationsAddCount(state, n = 0) {
        return (state.count += n)
    }
}
const actions = {
    actionsAddCount(context, n = 0) {
        console.log(context)
        return context.commit('mutationsAddCount', n)
    },
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduceCount', n)
    }
}
const getters = {
    getterCount(state, n = 0) {
        return (state.count += n)
    }
}
export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions,
    modules
})