安装
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);
