uniApp 封装VUEX - 技术栈

Vuex Store (index.js)

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)

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,
        }),
    },
};

使用示例

html 复制代码

<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>

全局混入

js 复制代码

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()