uniApp 封装VUEX

Vuex Store (index.js)

import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie';Vue.use(Vuex);const saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_demo'];const initialState = {vuex_user: { name: '用户信息' },vuex_token: Cookies.get('token') || '',vuex_isdev: false,vuex_version: '1.0.1',vuex_demo: '绛紫',vuex_testStore: '测试vuexStore',
};const store = new Vuex.Store({state: {...initialState,},mutations: {},actions: {dynamicAction(context, payload) {return new Promise((resolve, reject) => {context.commit(payload.type, payload.value).then(resolve).catch(reject);});},},
});// 动态生成 mutations 和 actions
const createMutation = (key) => (state, value) => {state[key] = value;saveLifeData(key, value);if (key === 'vuex_token') {Cookies.set('token', value);}
};const createAction = (key) => ({ commit }, value) =>new Promise((resolve, reject) => {commit(`SET_${key.toUpperCase()}`, value).then(resolve).catch(reject);});saveStateKeys.forEach(key => {store.commit(`ADD_MUTATION_${key.toUpperCase()}`, createMutation(key));store.commit(`ADD_ACTION_${key.toUpperCase()}`, createAction(key));
});function saveLifeData(key, value) {if (saveStateKeys.includes(key)) {let tmp = uni.getStorageSync('lifeData') || {};tmp[key] = value;uni.setStorageSync('lifeData', tmp);}
}export default store;

Mixin ($u.mixin.js)

import { mapState, mapActions } from 'vuex';
import store from '@/store';const $uStoreKey = Object.keys(store.state);const dynamicMapActions = (actionsObj) => {return Object.fromEntries(Object.entries(actionsObj).map(([actionName, action]) => [actionName,action.bind(null, store.dispatch),]));
};module.exports = {beforeCreate() {this.$u = {vuex: (name, value) => {if (value !== undefined) {this[`update${name.charAt(0).toUpperCase() + name.slice(1)}`](value);} else {return this[name];}},};},computed: {...mapState($uStoreKey.filter(key => key.startsWith('vuex_'))),},methods: {...dynamicMapActions({...store._modulesNamespaceMap['dynamic'].namespacedActions,}),},
};

使用示例

<template><div><h1>欢迎，{{ user.name }}!</h1><button @click="changeName">更改名字</button></div>
</template><script>
import uMixin from '@/mixins/u.mixin.js';export default {mixins: [uMixin],onShow() {this.$u.vuex('vuex_user', { name: '新用户' });console.log('初始用户信息:', this.$u.vuex('vuex_user'));},methods: {changeName() {this.$u.vuex('vuex_user', { name: '新用户' });},},
};
</script>

全局混入

import Vue from 'vue'
import store from '@/store';
// 引入uView提供的对vuex的简写法文件
let vuexStore = require('@/store/$u.mixin.js');
Vue.mixin(vuexStore);
const app = new Vue({store
})
app.$mount()