vue中vuex状态管理

一、安装

cnpm i vuex --save-dev

二、引入（main.js）

import store from './store'

new Vue({
    el: '#app',
    store,//注册
    components: { App },
    template: '<App/>'
})

三、vuex配置 src > store > index.js（src下创建store目录，目录中创建index.js）

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

Vue.use(Vuex)
let state = {
    box1: '0',
    box2: '1'
}
let getters = {
    getbox1(state){
            return state.box1
    },
    getbox2(state){
            return state.box2
    }
}
let mutations = {
    setBox1(state, str){
        state.box1 += str
    }, 
    setBox2(state, str){
        state.box2 += str
    }
}
let actions = {
    acBox1(context, str){
        // 调用mutations的setBox1方法，并把接收到的str参数传入
        context.commit('setBox1', str)
    },
    acBox2(context, str){
        context.commit('setBox2', str)
    }
}
let store = new Vuex.Store({
        state, getters, mutations, actions
})
export default store; // 导出配置项

四、组件中使用

this.$store.state.box1  // 获取state变量
this.$store.getters.getbox1  // 获取getter变量
this.$store.dispatch('acBox1', '1')  // 调用actions的方法，并传入参数1
this.$store.commit('setBox1', '1')  // 调用mutations的方法，并传入参数1