@wonderful/easyvuex NPM

easy-vuex

easyvuex 是对 vuex 的封装, 简化vuex 的使用。

安装

npm i @wonderful/easyvuex

使用

easyvuex 分为两个部分：整体插件引入以及store modules 转换。在 main.js 文件中，引入 easyvuex，并且绑定 store 和 router

import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'
import store from './store/store'
import { easyVuex } from '@wonderful/easyvuex'

Vue.use(VueRouter)
Vue.use(easyVuex, {
  store,
  router
})

引入 easyVuex 插件后，在任意 vue 实例中，均可使用 state 配置项，用于声明对 getters 的引用，比如：

  props: {},
  state: [
    'zoneList',
    'projectList',
    'itemList',
    'taskTypeOptions'
  ],
  data () {
    return {
      ...
    }
  },
  ...

此处的 zoneList 等同于 mapGetters 获取的 zoneList 变量，同时对 zoneList 的修改，自动触发 commit('zoneList', newVal)

在任意 vue 实例中，增加了 do 方法，作为 dispatch 的扩展，拥有向上追溯调用 actions 的机制。在任意 vuex 实例中，内置了 clone 方法(暂用)

第二部分在每个 modules 中使用，推荐把下面的代码配置为编辑器的 snippet：

import { transfer } from '@wonderful/easyvuex'

const state = {}
const getters = {}
const mutations = {}
const actions = {}

const store = transfer({
  state,
  getters,
  actions,
  mutations,
  modules: {}
})

export default store
/* 根文件写做 */
// export default new Vuex.Store(store)

modules需要和路由层级保持一致，推荐各个页面的 store modules 和页面的.vue文件放在同一文件夹下。

机制

通过 transfer 函数会对包裹的函数做如下处理:

对所有 state 声明同名的 mutations
对所有 state 声明同名的 getters
所有的 getters 为函数，提供两个参数：
- state：即 vuex getters 原 state 参数
- get：函数，可以向上追溯各个层级的 getters
actions 增加 pre 方法，pre 方法会首先执行，可用于数据预处理。
actions 增加 check 方法，如果 check 返回值为 false，则 actions 提前结束。
如果存在 action 方法，则执行，action 方法提供两个参数
- options：即调用时提供的载荷
- get：函数，可以向上追溯各个层级的 getters
否则如果存在 link 方法，会以 method 方式（get/post），发送 setting 作为参数
- link 可以是字符串或者函数
- link 函数提供一个参数
- options：即调用时提供的载荷
- setting 可以是对象或者函数
- setting 函数提供两个参数：
- context：当前 store 上下文
- options：即调用时提供的载荷
调用 dispose 方法，处理 action 或 link 接口的返回值
- dispose 函数提供三个参数：
- {commit, get} 可以向上追溯各个层级的 commit和getters
- res action 或 link 接口的返回值
- options：即调用时提供的载荷

向上追溯

页面的本质，是一些数据在场景逻辑下的集合，而路由则是页面关系的组织。所以，路由天然就是一种数据集合的拆分。

路由所管理的场景逻辑和组件的复用有所交叉，对于渲染组件来说，它并不关心数据的实际意义，只关心格式即可。但是对于页面级别来说，不同路由下的页面，可能需要使用同样的组件渲染结构相似但内容不同的数据，此时我们可以选择在页面组件和渲染组件之间增加模块组件，作为亚页面级的业务耦合模块来承载数据和逻辑。如果有一种方法可以把语境(路由)加入到，数据的管理中，我们则可以避开这些亚页面级的业务耦合模块。

受semanticUI 和原型链启发，easyvuex 在 getters 和 do(即原dispatch 方法)中，拓展了向上追溯机制。

比如当前路由为：/book/detail?id=123

调用 this.do('getDetail', {id: this.$route.query.id})

则 do 方法会首先在名为 '/book/detail'的 namespace 中寻找名为 getDetail 的 actions，如果没有的话，继续寻找 '/book' 空间下是否有 getDetail 方法，如果没有，则在根 store 中寻找，仍然没有的话会抛出错误。

类似的，如果在组件中使用 state:'bookDetail' 引入 bookDetail 对象，也会按照这个顺序依次寻找对应的三个 store modules 中，是否有相应的 getters。