安装

npm install vuex --save
// vuex 中的数据，页面刷新时会重置，此时需要数据持久化，不需要可不安装此插件
npm install vuex-persistedstate --save

使用

1、 在项目根目录下新建store文件夹，再在store文件夹内新建index.js，写入以下内容

import Vue from 'vue';
import Vuex from 'vuex';
// 数据持久化插件，如不需要可删
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);

const store = new Vuex.Store({
    /* 此处存储数据，以 vuex 开头，方便页面中使用时区分数据来源 */
    state: {
        vuex_test: '123',
    },
    /* 
     * 包装类，此处用于包装 state 中数据，类似于 vue 中的计算属性
     * getters 是唯一可以取 state 值的方法
     */
    getters: {},
    /** 
     * 唯一修改 state 值方法，会造成同步阻塞
     * 此处用于处理 state 中数据，存放方法类似 vue 中的 methods
     * state 中所有数据的修改都应该通过 mutations 内方法实现
     * 第一个形参永远都是 state
     * 第二个形参是调用此方法时传递的参数
     */
    mutations: {
        /* 
         针对所有 state 属性的修改方法
         用法：this.lemon.vuex('属性名','属性值');
         */
        $vuex_mutation(state, payload) {
            // 判断是否多层级调用，state中为对象存在的情况，诸如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 {
                // 单层级变量，在 state 就是一个普通变量的情况
                state[payload.name] = payload.value;
            }
        },
        updateVuexTest(state, payload) {
            state.vuex_test = payload;
        },
    },
    /**
     * 异步方法
     * 调用 mutations 方法，实现异步更新 state 数据*
     * 第一个形参永远都是 context
     * 第二个形参是调用此方法时传递的参数
     */
    actions: {
        asyncUpdateVuexTest(context, payload) {
            context.commit('updateVuexTest', payload)
        },
    },
    /**
     * vuex 插件，以数组形式引入
     * createPersistedState => vuex 数据持久化插件
     */
    plugins: [
        createPersistedState({
            // 默认存储在 localStorage 现改为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、页面/组件中使用

3.1、获取 state 中数据（三种方式）

// 直接获取
// 简单易懂，数据如果在当前页面不需要实时刷新，仅仅获取可以尝试
// 如果用此种方式，可以在computed中定义一个计算属性，绑定到需要用到数据的地方，也可以实现实时刷新
this.$store.state.xxx

// 导入 state 对象，映射到 computed
// 由于computed的存在，数据可以实时刷新
import { mapState } from ‘vuex’
computed: {
    ...mapState(['vuex_test']), //使用时与data中数据方式相同
}

// 导入 getters 包装对象，映射到 computed
// 由于 computed 的存在，数据可以实时刷新
// 同时 getters 可以对数据进行处理，得到想要的数据格式
import { mapGetters} from ‘vuex’
computed: {
  ...mapGetters(['vuex_test']), // 使用时与 data 中数据方式相同
}

3.2、使用 mutations 内方法（设置 state 中数据）(2种方式)

// 直接调用 mutations 中方法
// 简单易懂，在需要设置数据的地方直接调用即可，但需要反复调用时不方便
this.$store.commit('updateVuexTest', loginRes);

// 导入mapMutations，映射到 methods 中
// 由于 vue 的特性，在 main.js 中无法获取到 store 对象，所以无法使用此种方式（可能是我使用方式不对，赶时间未具体测试）
import { mapMutations } from 'vuex'
methods:{
  ...mapMutations(['updateVuexTest']),
  test(){
    this.updateVuexTest(data)  // 此处调用映射的 setAuth 方法传递参数data
  }
}

4、组件化（小项目暂时不需要用到，用到了再详细记录）

其他小技巧

通过 mixin 注入针对所有属性的 mutations 修改方法，实现页面里更简单的方法修改 state 值。

1、store 目录下新建 vue.mixin.js 文件，写入以下内容

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 中的所有变量，解构到全局混入的 mixin 中
        ...mapState($storeKey)
    },
}

2、main.js mixin

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