vuex-pathify 一个基于vuex进行封装的vuex助手语法插件

上一篇讲到vuex中的store存储数据的几种方式，其实还有一个很好用的插件就是vuex-pathify，接下来给大家介绍一下他的用法吧

官方文档：davestewart.github.io/vuex-pathif…

使用方法

安装

npm i vuex-pathify
yarn add vuex-pathify

步骤

1、新建vuex-pathify.js

import pathify from 'vuex-pathify'

// 配置项
pathify.options.mapping = 'simple'
pathify.options.strict = true

export default pathify

2、在store.js中导入该配置文件

// Vue
import Vue from 'vue'
import Vuex from 'vuex'
import pathify from '@/plugins/vuex-pathify'

// Modules

Vue.use(Vuex)

const store = new Vuex.Store({
  plugins: [
    pathify.plugin, // 配置pathify插件
  ],
})


export default store

3、取，存，存+取

//取 get
 import { get } from 'vuex-pathify'
 import store from '../store'
 
 computed: {
      demo: get('demo'),
    },
//存 set
 store.set('a', val) // 设置根属性的值
 store.set('a/b', val) // 设置模块根属性的值
 store.set('a/b@c', val) // 设置模块根属性的子属性的值
 
//存+取
 value: sync('module/object@value'),
 c: sync('module/object@a.b.c'),
 ...sync('module', [ // 数组模式
    'value',
    'str'
 ]),
 ...sync('module', { // 对象模式,别名模式
    altValue: 'value',
    altStr: 'str'
 })

总结

以上就是vuex-pathify的使用方法，其简化了开发流程，消除重复代码，是一个非常好的开发工具库，强烈推荐使用!