vuex的使用详细说明
Posted 咖啡壶子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的使用详细说明的主要内容,如果未能解决你的问题,请参考以下文章