vue的状态管理实现

我们要实现vuex,需要以下步骤

1.在项目文件夹下运行命令

npm install vuex(在文件管理器的目录上直接运行cmd即可，然后输入命令)

在项目下新建store文件夹，里面新建index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//实例化store
const store = new Vuex.Store({
//这里类似data,保存全局变量
    state: {
        token: '',
        username:""
    },
    //这里类似methods，修改state里面变量的值需要调用此方法
    mutations: {
    //这里方法里面的state是系统自动传入的，不用手动传入。后面的变量需要调用方法的时候手动传入
        setToken (state, token) {
            state.token = token;
            sessionStorage.token = token;
        },
        removeToken (state) {
            state.token = '';
            sessionStorage.removeItem('token');
        },
        setUsername(state,username){
            state.username = username;
            sessionStorage.username = username;
        },
        removeUsername(state){
            state.username="";
            sessionStorage.removeItem("username");
        }
    },
    //这里是用来调用mutations里面的方法，因为mutation不能直接被调用
    actions:{
        setToken(context,token){
            context.commit('setToken',token)
        },
        removeToken(context){
            context.commit('removeToken')
        },
        setUsername(context,username){
            context.commit('setUsername',username)
        },
        removeUsername(context){
            context.commit('removeUsername')
        }


    }
});
export default store;

``