Vue项目Vuex状态使用示例

Vuex在使用状态机制存储全局变量时非常好用，下面给出一个示例：

第一步，定义状态变量state,mutations中的方法为对应变量值写入方法

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        //当前用户
        user: '',
    },
    //模块化
    modules：{
    }，
    mutations: {
        setLoginName(state, val) {
            state.user = val;
        }
    },
    actions: {
    	//此处可进行异步写入
		setLoginName(state){
			//异步请求val
			state.commit('setLoginName',val)
		}
	},
    getters: {
		user(state){
			return state.user
		}
	}
})

第二部：如何给变量写入值，如何读取值

    export default {
        data() {
            return {
                loginName: '',
            };
        },

        created() {
            //写入值方式
           this.$store.commit('setLoginName', user)
	       //异步写入
           this.$store.dispatch('setLoginName');
		   //读取值方式
           this.$store.getters.user
        },
        computed:{
	        //如果是异步写入的，需要用计算属性监听
        	user(){
				return this.$store.getters.user
			}
        }
    }