vuex pathify

状态的存储访问统一使用 get()、set()、sync()、call() 方法

demo

安装

npm i vuex-pathify

配置

scheme path state getter mutation action notes
standard /foo foo foo SET_FOO setFoo 默认
simple /foo foo foo foo setFoo 简洁 
1
2
3
4
5
6
7
// 默认配置
export default {
  mapping: 'standard',  // map states to store members using the "standard" scheme
  strict: true,         // throw an error if the store member cannot be found
  cache: true,          // cache generated functions for faster re-use
  deep: true,           // allow sub-property access to Vuex stores
}
由于ES6导入的工作方式，配置必须保存在独立文件中，并且必须在导入任何存储文件之前导入
  1. 新建 store/pathify.js
1
2
3
4
5
6
import pathify from 'vuex-pathify'

pathify.options.mapping = 'standard'
pathify.options.deep = 2

export default pathify
  1. 项目集成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
import Vuex from 'vuex'

import pathify from 'vuex-pathify'

// 检查设置，输出当前options值和映射函数输出的明细
pathify.debug()

const store = {
  // state, members, modules, etc
}

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [ pathify.plugin ],
  ...store
})

参数说明

deep:

0：禁止访问子属性
1：启用对现有子属性的访问
2：允许创建新的子属性

自定义配置

1
2
3
4
5
6
7
8
9
10
11
pathify.options.mapping = function (type, name, formatters) {
  switch(type) {
    case 'mutations':
      return formatters.const('set', name)
    case 'actions':
      return formatters.camel('set', name)
    case 'getters':
      return formatters.snake('get', name)
  }
  return name // foo
}

formatters:

camel - camelCase
snake - snake_case
const - CONST_CASE

API

1
2
3
4
5
6
7
8
9
10
import { make } from 'vuex-pathify'

const state = {
  items: [],
  status: '',
  filters: {
    search: '',
    sort : { ... }
  }
}

const mutations = make.mutations(state)

代码生成如下：

1
2
3
4
5
6
7
8
9
10
11
mutations = {
    SET_ITEMS: (state, value) => state.items = value instanceof Payload
        ? value.update(state[key])
        : value,
    SET_STATUS: (state, value) => state.status = value instanceof Payload
        ? value.update(state[key])
        : value,
    SET_FILTERS: (state, value) => state.filters = value instanceof Payload
        ? value.update(state[key])
        : value,
}

const actions = make.actions(state)

代码生成如下：

1
2
3
4
5
const actions = {
    setItems: ({commit}, value) => commit('SET_ITEMS', value),
    setStatus: ({commit}, value) => commit('SET_STATUS', value),
    setFilters: ({commit}, value) => commit('SET_FILTERS', value),
}

const getters = make.getters(state)

代码生成如下：

1
2
3
4
5
const getters = {
  items: state => state.items,
  status: state => state.status,
  filters: state => state.filters,
}

get 访问

1
2
store.get('filters@sort.order')
this.$store.getters['filters@sort.order']

set 设置

1
store.set('items', data).then(console.log)

sync 设置双向绑定数据

1
2
3
4
5
6
7
8
9
10
sync('products/status')
// 生成代码如下：
status: {
    get () { 
      return this.$store.state.products.status
    },
    set (value) {
      return this.$store.commit('products/SET_STATUS', value)
    },
}

call 创建函数 dispatch actions

1
2
3
4
5
6
7
8
9
methods: {
  load: call('products/load')
}

methods: {
  load (payload) {
    return this.$store.dispatch('products/load', payload)
  }
}

装饰器

1
2
3
4
5
6
7
8
9
import { Get, Sync, Call } from 'vuex-pathify'

// component
@Components
export default class Item extends Vue {
  @Get('products/items') items
  @Sync('products/tax') tax
  @Call('products/setDiscount') setDiscount
}

等价于

1
2
3
4
5
6
7
8
9
10
11
12
import { get, sync, call } from 'vuex-pathify'

export default {
  computed: {
    items: get('products/items'),
    tax: sync('products/tax'),
  },

  methods: {
    setDiscount: call('products/setDiscount')
  }
}