1. 概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
2. 何时使用?
多个组件需要共享数据时
3. 搭建vuex环境
创建文件:src/store/index.js
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)
// 准备actions---用于响应组件中的动作
const actions = {
}
// 准备mutations---用于操作数据(state)
const mutations = {
}
// 准备state---用于存储数据
const state = {
}
// 创建store and 导出
export default new Vuex.Store({
actions,
mutations,
state
})
在main.js中创建vm时传入store配置时
....
// 引入store
import store from './store'
....
// 创建vm
const vm = new Vue({
render:h=>h(App),
store,
beforeCreate(){
Vue.prototype.$bus = this
}
})
4. 基本使用
4.1 初始化数据,配置actions,配置mutations,操作文件store.js
// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex插件
Vue.use(Vuex)
const actions = {
// 响应组件中加的动作
jia(context,value){
// console.log('actions中的jia被调用了',context,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 Vue.Store({
actions,
mutations,
state
})
4.2 组件中读取vuex中的数据: $store.state.sum
4.3 组件中修改vuex中的数据: $store.dispatch('actions中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
备注:若没有网络请求或其他业务逻辑,组件中也可越过actions,既不写dispatch,直接编写commit
5. getters的使用
5.1 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工
5.2 再store.js中追加getters配置
....
const getters = {
bigSum(state){
return state.sum * 10
}
}
// 创建并暴露store
expost default new Vuex.Store({
....
getters
})
5.3 组件中读取数据:
$store.getters.bigSum
6. 四个map方法的使用
6.1 mapState方法,用于帮助我们映射state中的数据为计算属性
computed:{
// 借组mapState生成计算属性: sum,school,subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
// 借助mapState生成计算属性,从state中读取数据(数组写法)
...mapState(['sum','school','subject']),
6.2 mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed:{
// 借助mapState生成计算属性,从state中读取数据.(对象写法)
...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
// 借助mapState生成计算属性,从state中读取数据(数组写法)
...mapState(['sum','school','subject']),
}
6.3 mapActions方法:用于帮助我们生成于actions对话的方法,即:包含$store.dispatch(xxx)的函数
methods:{
// 靠mapActions生成:inCrementOdd,inCrementWait(对象形式)
...mapActions({inCrementOdd:'jiaOdd',inCrementWait:'jiaWait'}),
// 靠mapActions生成:inCrementOdd,inCrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait']),
}
6.4 mapMutations方法:用于帮助我们生成与mutations对话的方法,既:包含$store.commit(xxx)的函数
methods:{
// 靠mapMutations方法生成:inCrement,deCrement(对象形式)
...mapActions({inCrement:'JIA',deCrement:'JIAN'}),
// 靠mapMutations方法生成:JIA,JIAN(数组形式)
...mapActions(['JIA','JIAN']),
}
备注:mapActions与mapMutations使用时,若需要传递参数需要,在模板中绑定事件时传递好参数,否则参数是事件对象
7. 模块化+命名空间
7.1 目的:让代码更好维护,让多种数据分类更加明确
7.2 修改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
}
})
7.3 开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取
...mapState('personAbout',['list'])
标签:...,const,actions,state,Vuex,store From: https://www.cnblogs.com/DTCLOUD/p/17315415.html张勇辉