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;

``