碎碎念ZWS

Vuex统一了页面内的状态的管理和变化线程，使得单页面应用组件之间的交互变得更流畅，控制更有秩序，避免了两个组件同时变化同一个状态容易引发的冲突问题。

本文档编写对应版本为vue1.0+及vuex1.2+，请注意不同版本之间的差异。

VUEX使用步骤：

1.初始化Store

定义vuex/store.js

/*
* 全局变量仓库
*/
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 保存初始状态
const state = {
	token: null,
	user: {
		avatar: null,
		name: null,
		phone: null
	}
}
// 存储状态变更函数
const mutations = {
	SETTOKEN(state,token) {
		state.token = token;
	}
}
// 连接到应用
export default new Vuex.Store({
	state,
	mutations
})

定义vuex/getters.js

/*
*获取仓库指定参数的值
*/
export function getToken(state) {
	return state.token;
}

定义vuex/actions.js

/*
* 向全局变量仓库插入指定值.
* dispatch触发的函数必须是在store中定义的存储状态变更函数
*/
//设置token
export const setToken = function({dispatch}, token) {
	dispatch('SETTOKEN',token)
}

2.使用store

在页面js中引入store

import Vue from 'vue';
import store from '../../vuex/store';
import App from '../../app.vue';
new Vue({
    store,components:{App}
})

在组件中引用。

import { setToken } from '../../vuex/actions'; //引入action钩子
export default {
    //vuex
    vuex: {
        getters: {
            token: state => state.token
        },
        actions: {
            setToken
        }
    },
    computed: {},
    //vuex end
    data() {
        return {}
    },
    methods: {
        test() {
            if (xxx) {
                this.setToken(xxx); //调用action
            }
        }
    }
}

3.使用小结

在当前Vue（v1.0+）版本中使用Vuex还是没有展示出很强的优势，毕竟目前组件之间有sync和v-modal搭配使用，在小项目中已经足够通过父组件来统一管理不同子组件的状态并同步到各个组件中。