安裝

npm install vuex --save
// vuex 中的數(shù)據(jù)，頁(yè)面刷新時(shí)會(huì)重置，此時(shí)需要數(shù)據(jù)持久化，不需要可不安裝此插件
npm install vuex-persistedstate --save

使用

1、 在項(xiàng)目根目錄下新建store文件夾，再在store文件夾內(nèi)新建index.js，寫(xiě)入以下內(nèi)容

import Vue from 'vue';
import Vuex from 'vuex';
// 數(shù)據(jù)持久化插件，如不需要可刪
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);

const store = new Vuex.Store({
    /* 此處存儲(chǔ)數(shù)據(jù)，以 vuex 開(kāi)頭，方便頁(yè)面中使用時(shí)區(qū)分?jǐn)?shù)據(jù)來(lái)源 */
    state: {
        vuex_test: '123',
    },
    /* 
     * 包裝類(lèi)，此處用于包裝 state 中數(shù)據(jù)，類(lèi)似于 vue 中的計(jì)算屬性
     * getters 是唯一可以取 state 值的方法
     */
    getters: {},
    /** 
     * 唯一修改 state 值方法，會(huì)造成同步阻塞
     * 此處用于處理 state 中數(shù)據(jù)，存放方法類(lèi)似 vue 中的 methods
     * state 中所有數(shù)據(jù)的修改都應(yīng)該通過(guò) mutations 內(nèi)方法實(shí)現(xiàn)
     * 第一個(gè)形參永遠(yuǎn)都是 state
     * 第二個(gè)形參是調(diào)用此方法時(shí)傳遞的參數(shù)
     */
    mutations: {
        /* 
         針對(duì)所有 state 屬性的修改方法
         用法：this.lemon.vuex('屬性名','屬性值');
         */
        $vuex_mutation(state, payload) {
            // 判斷是否多層級(jí)調(diào)用，state中為對(duì)象存在的情況，諸如user.info.score = 1
            let nameArr = payload.name.split('.');
            let len = nameArr.length;
            if (nameArr.length >= 2) {
                let obj = state[nameArr[0]];
                for (let i = 1; i < len - 1; i++) {
                    obj = obj[nameArr[i]];
                }
                obj[nameArr[len - 1]] = payload.value;
            } else {
                // 單層級(jí)變量，在 state 就是一個(gè)普通變量的情況
                state[payload.name] = payload.value;
            }
        },
        updateVuexTest(state, payload) {
            state.vuex_test = payload;
        },
    },
    /**
     * 異步方法
     * 調(diào)用 mutations 方法，實(shí)現(xiàn)異步更新 state 數(shù)據(jù)*
     * 第一個(gè)形參永遠(yuǎn)都是 context
     * 第二個(gè)形參是調(diào)用此方法時(shí)傳遞的參數(shù)
     */
    actions: {
        asyncUpdateVuexTest(context, payload) {
            context.commit('updateVuexTest', payload)
        },
    },
    /**
     * vuex 插件，以數(shù)組形式引入
     * createPersistedState => vuex 數(shù)據(jù)持久化插件
     */
    plugins: [
        createPersistedState({
            // 默認(rèn)存儲(chǔ)在 localStorage 現(xiàn)改為sessionStorage
            storage: window.sessionStorage,
        })
    ]
})

export default store;

2、在main.js中引入并掛載使用store

import App from './App'

// 引入vuex
import store from './store'
// 把vuex定義成全局屬性
Vue.prototype.$store = store

new Vue({
    store,
    render: h => h(App)
}).$mount('#app');

3、頁(yè)面/組件中使用

3.1、獲取 state 中數(shù)據(jù)（三種方式）

// 直接獲取
// 簡(jiǎn)單易懂，數(shù)據(jù)如果在當(dāng)前頁(yè)面不需要實(shí)時(shí)刷新，僅僅獲取可以嘗試
// 如果用此種方式，可以在computed中定義一個(gè)計(jì)算屬性，綁定到需要用到數(shù)據(jù)的地方，也可以實(shí)現(xiàn)實(shí)時(shí)刷新
this.$store.state.xxx

// 導(dǎo)入 state 對(duì)象，映射到 computed
// 由于computed的存在，數(shù)據(jù)可以實(shí)時(shí)刷新
import { mapState } from ‘vuex’
computed: {
    ...mapState(['vuex_test']), //使用時(shí)與data中數(shù)據(jù)方式相同
}

// 導(dǎo)入 getters 包裝對(duì)象，映射到 computed
// 由于 computed 的存在，數(shù)據(jù)可以實(shí)時(shí)刷新
// 同時(shí) getters 可以對(duì)數(shù)據(jù)進(jìn)行處理，得到想要的數(shù)據(jù)格式
import { mapGetters} from ‘vuex’
computed: {
  ...mapGetters(['vuex_test']), // 使用時(shí)與 data 中數(shù)據(jù)方式相同
}

3.2、使用 mutations 內(nèi)方法（設(shè)置 state 中數(shù)據(jù)）(2種方式)

// 直接調(diào)用 mutations 中方法
// 簡(jiǎn)單易懂，在需要設(shè)置數(shù)據(jù)的地方直接調(diào)用即可，但需要反復(fù)調(diào)用時(shí)不方便
this.$store.commit('updateVuexTest', loginRes);

// 導(dǎo)入mapMutations，映射到 methods 中
// 由于 vue 的特性，在 main.js 中無(wú)法獲取到 store 對(duì)象，所以無(wú)法使用此種方式（可能是我使用方式不對(duì)，趕時(shí)間未具體測(cè)試）
import { mapMutations } from 'vuex'
methods:{
  ...mapMutations(['updateVuexTest']),
  test(){
    this.updateVuexTest(data)  // 此處調(diào)用映射的 setAuth 方法傳遞參數(shù)data
  }
}

4、組件化（小項(xiàng)目暫時(shí)不需要用到，用到了再詳細(xì)記錄）

其他小技巧

通過(guò) mixin 注入針對(duì)所有屬性的 mutations 修改方法，實(shí)現(xiàn)頁(yè)面里更簡(jiǎn)單的方法修改 state 值。

1、store 目錄下新建 vue.mixin.js 文件，寫(xiě)入以下內(nèi)容

import { mapState } from 'vuex';
import store from "./index.js";

// 嘗試將用戶在根目錄中的 store/index.js 的 vuex 的 state 變量，全部加載到全局變量中
let $storeKey = [];
try {
    $storeKey = store.state ? Object.keys(store.state) : [];
    // console.log('======>>>','$storeKey: ', $storeKey)
} catch (e) {}

export default {
    created() {
        // 將 vuex 方法掛在到 $u 中
        // 使用方法為：如果要修改 vuex 的 state 中的 user.name 變量為 "張三" => this.vuex_set('user.name', '張三')
        // 如果要修改 vuex 的 state 的 version 變量為 1.0.1 => this.$u.vuex('version', '1.0.1')
        this.vuex_set = (name, value) => {
            this.$store.commit('$mutation_all', {
                name,
                value
            });
        }
    },
    computed: {
        // 將 vuex 的 state 中的所有變量，解構(gòu)到全局混入的 mixin 中
        ...mapState($storeKey)
    },
}

2、main.js mixin

/* vuex mutations 方法 */
import vuexStore from './store/vuex.mixin.js';
Vue.mixin(vuexStore);