vuex-pathify入门

vuex-pathify：
通过路径语法和工具函数简化Vuex整体开发体验
基于对vuex进行封装的的vuex助手语法插件

安装步骤:

npm i vuex-pathify --save

配置

pathify的核心机制是路径语法,配置的目的是告知pathify使用什么样的命名方案将路径映射到存储成员上## 配置默认值
export default {mapping: 'standard', // 路径映射方案deep: 0 | 1 | 2 // state子属性访问模式 0: 不允许, 1: 允许访问现有 2: 允许新建子属性
}

使用步骤:
1.新建pathify.js代码如下:

//下载之后引入
import pathify from 'vuex-pathify'// 配置项
pathify.options.mapping = 'simple'
pathify.options.deep = 1
pathify.debug() // 输出当前配置export default pathify

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

import Vue from 'vue'
import Vuex from 'vuex'
import pathify from './pathify' // 注意引入的文件就是步骤1的文件(不要直接引入Pathify,除非你想使用默认配置)
import root from './root' // 根模块
import app from './modules/app' // app在pathify后引入,否则可能导致配置无效Vue.use(Vuex)const store = new Vuex.Store({strict: true,//是否开启严格模式,默认是falseplugins: [pathify.plugin], // 配置pathify插件...root,modules: {app}
})console.log(store) // 输出当前store详情export default store

3.检查配置

3.1 pathify.debug()使用pathify.debug() 输出当前配置.查看结果是否与配置一致(主要查看Mapping (simple), mutations  : value)特别注意: 配置未生效的情况下会使用默认配置,如果发现修改配置后,debug的输出没有符合预期,那么应该某个地方出现了问题3.2 console.log(store)直接在控制台打印出store,可以更加详细地看到store的成员是否符合配置

英文地址->可以翻译为中文参考
链接地址:https://davestewart.github.io/vuex-pathify/#/api/paths

使用get()工具函数(非实例的)生成参数的get方法()

computed: {rootValue: get('rootValue') // 获取根属性moduleRootValue: get('moduleName/moduleRootValue') // 获取模块根属性rootValueChild: get('moduleName/moduleRootValue@rootValueChild') // 获取模块根属性的子属性z: get('moduleName/moduleRootValue@rootValueChild.x.y.z') //  获取模块根属性的子属性的后代属性
}

通配符模式

computed: {...get('*') // 生成所有根属性的属性名和其get方法...get('moduleName/*') // 获取模块所有的根属性的属性名和其get方法...get('moduleName/object@*') // 获取模块根属性上所有子属性属性名和其get方法
}

数组模式/对象模式

computed: {...get('app', ['age','car']),...get('app', {altCar: 'car',altMsg: 'msg'})
}

使用实例的set()函数改变状态

store.set('a', val) // 设置根属性的值
store.set('a/b', val) // 设置模块根属性的值
store.set('a/b@c', val) // 设置模块根属性的子属性的值

直接调用非SET_*开头的mutation/action

//action异步
//mutation同步

store.set('a/INCREMENT_A!')  // mutation
store.set('a/loadValue!') // action

使用sync()工具函数(非实例的)同步函数生成属性的get+set方法

computed: {value: sync('module/object@value'),c: sync('module/object@a.b.c'),...sync('module', [ // 数组模式'value','str']),...sync('module', { // 对象模式,别名模式altValue: 'value',altStr: 'str'})
}

API

Pathify有两种语法类型，用于处理非get / set命名的自定义。
## 直接语法
store.set('update!', items) // 调用名为update的action/mutation## 直接同步,并且使用管道符|
computed: {items: sync('items|update!')
}

存储助手make工具函数

getters
const getters = { ...make.getters(state), // 生成state的getters items: state => { // 覆盖默认items的getter ... }, filteredItems: (state, getters) => { // 新的getter return ... } }mutations
const mutations = make.mutations(state) // 生成所有state的mutationsactions
const actions = { ...make.actions('items'), // 只生成items的action loadItems({dispatch}){ dispatch('setItems', data); // 派发生成的items的action } }部分生成
const state = { items: [], status: { code: '', time: '' } }const mutations = make.mutations('items status') // 字符串形式const mutations = make.mutations(['items', 'status']) // 数组形式

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

使用插件

//获取vuex的某个变量,此处默认进行了模块具名化
module:{
state:{
openid:0000
}
}
console.log(this.$store.module.state.openid)
//使用插件(就是如此简单)
console.log(this.$store.get('module/openid')

vuex-pathify入门相关推荐

vuex 基本入门和使用（二）
vuex 基本入门和使用(二) vuex 版本为^2.3.1,按照我自己的理解来整理vuex. 关于 state 每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态 ...
vue2 + vue-router + vuex + iview 入门项目
简单的vue2 + vue-router + vuex + iview 入门项目,一个移动端平台的简易考试系统.灵感来源于近期工作项目中开发的一套考试平台系统.欢迎大家来issues指出错误共同进步. ...
Vuex从入门到入门
Vuex 是什么? 官方是这么说的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 不懂? ...
vuex 基本入门和使用（一）
vuex 版本为^2.3.1,按照我自己的理解来整理vuex. vuex 是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规 ...
Vue.js实战之Vuex的入门教程
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方 ...
Vuex初级入门及简单案例
1.为什么要使用Vuex? (1)方便所有组件共享信息,方便不同组件共享信息. (2)某个组件需要修改状态和需求. 2.状态有哪些? (1)组件内部定义的data状态(通过组件内部修改) (2)组件外 ...
vuex简单入门：singer实例创建以及读写全过程
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 原理图对于原理图 ...
vue3.0+vuex+typescript 入门项目描述
先写仓库地址:https://gitee.com/orderkk/vuex-vue3.0-ts.git 项目目录介绍: 目录介绍: assets: 存放静态文件资源 components: 存放组件文 ...
Vuex从入门到实战（三）——使用Mutations变更state中的数据
上篇讲到可以通过this.$store.state.count或者...mapState(['count'])的方式可以拿到我们在state中存储的count值,那么如何修改这个值呢? 很多人都会想到 ...
1-5 Vuex学习（案例篇）
创建项目 CSDN笔记地址:https://blog.csdn.net/weixin_43742708/article/details/114667391 素材地址:蓝奏云 => https:/ ...

vuex-pathify入门

vuex-pathify入门相关推荐

最新文章

热门文章