vuex的使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex的使用相关的知识,希望对你有一定的参考价值。
参考技术Avuex适合用于多组件共享数据的情况,多个组件都能读,也都可以改。
vuex的执行流程:
安装
使用
vuex是一个插件,所以需要Vue.use
注册了vuex,我们就可以在vue里配置store了
getters
这里多了个配置 getters ,他可以看作是基于state的computed属性。使用的方式基本如下:
同时getters还可以配置成函数,方便我们动态传参,满足一些复杂一点的场景
调用
模块化store
随着项目迭代,需求的扩展,你的store会变得越来越臃肿,建议模块化拆分store
以上就是一些对象的拼装,但是模块要放到名为modules的属性内部,store的最终结构大致如下:
模块的命名空间
默认模块的state、getter等属性都会合并到根级别,如果你希望模块有更好的封装性,避免多模块命名污染,可以配置上命名空间属性namespace:true
使用了模块命名空间后,action和getter内部常规用法只能访问本命名空间的dispatch,commit或者getter,如果要访问全局命名空间,需要使用额外的参数和配置:
模块动态注册
在 store 创建之后,你可以使用 $store.registerModule 方法注册模块
如果大多场景下,你的模块化store并不会被使用,只在你的业务流程页面中被用到,这时可以考虑在合适的生命周期节点(比如created)动态注册你的模块。同时要注意先检查模块是否已经被安装: $store.hasModule(moduleName) ,避免重复注册模块,不然会出现逻辑问题。你也可以卸载自己的模块: $store.unregisterModule(moduleName)
官方文档
vuex的使用详细说明
目录:vuex的使用详细说明
概念
vuex是一种状态(数据)管理工具。
使用流程
- 下载包
npm install vuex
- 导入包
import Vuex from 'vuex'
- 注册
Vue.use(Vuex)
- 定义规则
const state=
const mutations=
const actions=
const getters=
const modules=
- 创建实例对象,并暴露
const store=new Vuex.Store(
state,
mutations,
actions,
getters,
modules
)
- 挂载
new Vue(
render: h => h(App),
store,
).$mount('#app')
- 使用
vuex原理
当修改vue的dom对象,
vuex会首先调用dispacth方法修改actions中的数据,
再通过commit方法修改mutations中的数据,
然后通过mutate把修改的值传到state中,
然后render重新更新视图。
vuex的基础使用
全部代码:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions =
//响应组件中加的动作
jia(context,value)
// console.log('actions中的jia被调用了',miniStore,value)
context.commit('JIA',value)
,
const mutations =
//执行加
JIA(state,value)
// console.log('mutations中的JIA被调用了',state,value)
state.sum += value
//初始化数据
const state =
sum:0
//创建并暴露store
export default new Vuex.Store(
actions,
mutations,
state,
)
getters的使用
-
概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
-
在
store.js
中追加getters
配置
......
const getters =
bigSum(state)
return state.sum * 10
//创建并暴露store
export default new Vuex.Store(
......
getters
)
四个map方法的使用
- mapState方法:用于帮助我们映射
state
中的数据为计算属性
computed:
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState(sum:'sum',school:'school',subject:'subject'),
//借助mapState生成计算属性:sum、school、subject(数组写法)
...mapState(['sum','school','subject']),
,
- mapGetters方法:用于帮助我们映射
getters
中的数据为计算属性
computed:
//借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters(bigSum:'bigSum'),
//借助mapGetters生成计算属性:bigSum(数组写法)
...mapGetters(['bigSum'])
,
- mapActions方法:用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数
methods:
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions(incrementOdd:'jiaOdd',incrementWait:'jiaWait')
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
- mapMutations方法:用于帮助我们生成与
mutations
对话的方法,即:包含$store.commit(xxx)
的函数
methods:
//靠mapActions生成:increment、decrement(对象形式)
...mapMutations(increment:'JIA',decrement:'JIAN'),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['JIA','JIAN']),
模块化+命名空间
-
目的:让代码更好维护,让多种数据分类更加明确。
-
修改
store.js
const countAbout =
namespaced:true,//开启命名空间
state:x:1,
mutations: ... ,
actions: ... ,
getters:
bigSum(state)
return state.sum * 10
const personAbout =
namespaced:true,//开启命名空间
state: ... ,
mutations: ... ,
actions: ...
const store = new Vuex.Store(
modules:
countAbout,
personAbout
)
- 开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject']),
- //方式一:自己直接读取
//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])
- 开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',incrementOdd:'jiaOdd',incrementWait:'jiaWait')
- 开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout',increment:'JIA',decrement:'JIAN'),
以上是关于vuex的使用的主要内容,如果未能解决你的问题,请参考以下文章