@lmio/dynamic-store

dynamicStore

根据state的结构自动化生成getters mutations

使用方法

import DynamicStore from '@lmio/dynamic-store';
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
  userName: '',
  userInfo: {
    email: '[e-mail]'
  },
  userList: [
    {
      userId: 1
    },
    {
      userId: 2
    }
  ],
}

const actions = {
  changeUsername: async (ctx) => {
    // 自动生成的mutation名称均为state键名
    ctx.commit('userName', ctx.payload);
  },
  changeUserEmail: async (ctx) => {
    // 多层结构的state使用 $ 连接符连接state键名 连接符可由配置修改 链式结构需要开启链式转换 chainConversion
    ctx.commit('userInfo$email', ctx.payload);
  },
  changeUserId: async (ctx) => {
    // 如果需要ds转换数组 需要开启 arrayConversion 配置
    // 开启数组转换之后数组索引需要当成键值使用
    ctx.commit('userList$0$userId', ctx.payload);
  }
}


// 需要提前执行 先于state初始化
// 如果需要ds转换数组 需要开启 arrayConversion 配置
const projectDs = new DynamicStore(state, {actions, arrayConversion: true, chainConversion: true});

// 目前只支持模块化的方式使用 生成模块时默认会开启 `namespaced : true` 强制使用模块命名空间
const module = projectDs.exportModule();

export default new Vuex.Store({
  modules: {
    module
  }
});


// getter使用

import {mapGetter} from 'vuex';

computed: {
  // 必须使用模块名
  // getter与mutation一样同样使用state键名
  // 多层结构的state使用 $ 连接符连接state键名 连接符可由配置修改
  ...mapGetter('module', ['userName', 'userName$email', 'userList$0$userId'])
}