一、Vuex
1、概念
- 作用:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信方式,且适用于任意组件间通信。
- 官网
- 使用场景
多个组件依赖同一状态。来自不同组件的行为需要变更同一状态。
2、环境搭建
- 下载
npm i vuex
- 引入
import Vuex from 'vuex'
- 使用
新建store文件夹,里面新建index.js,该文件用于创建Vuex中最核心的store,然后再引入
import store from './store'
new Vue({
store,
})
此时store就引用成功了。vc和vm上都有$store属性里,里面的函数都可以引用
二、原理
1、核心部分
核心代码都在store下的index.js中
- 三大核心 :actions,mutations和state
- 其他核心:getters
//引入Vue,Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于相应组件中的动作
const actions={
jia(context,value){
//context存放一些需要用的信息,比如actions需要调用commit,需要用到state中的data
//value是传递的参数
//一般commit的函数用大写,为了和actions中区分开
context.commit('JIA',value)
}
jiaodd(context,value){
//一些判断处理的代码都在actions中去做,mutations中只需要执行简单操作,不判断。
if(context.state.sum%2){
context.commit('JIA',value)
}
}
}
//准备mutations——用于操作数据(state)
const mutations={
JIA(state,value){
//state用来存放需要的数据
//value是传递的参数
state.sum+=value
}
}
//准备stata——用于存储数据
const state={
sum:0
}
//准备getters,用于将state中的数据进行加工
const getters = {
bigSum(state){
return state.sum*10
}
}
//创建并暴露store
export default new Vuex.Store({
actions, //actions:actions 对象和保存的值重名触发简写形式
mutations,
state,
getters
})
2、调用
在需要的组件中调用vuex
export default{
data(){
return{
n:1
}
},
methods:{
call1(){
this.$store.dispatch('jia',this.n)
},
call2(){
//若actions和mutations操作一样,可以不需要actions,直接调用mutations中
//一般若网络中没有请求或其他业务逻辑,组件中就可以越过actions,不写dispatch,直接编写commit
this.$store.commit('JIA',this.n)
}
}
}
三、其他
1、mapState/mapGetters
import {mapState,mapGetters} from 'vuex'
export default{
computed:{
//借助mapState生成计算属性,从state中读取数据。(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性,从state中读取数据。(数组写法)
//生成名字和state中名字需要一直
...mapState(['sum','school','subject'])
//getters也是类似两种写法,帮助映射getters中的数据为计算属性
...mapGetters(['bigSum'])
}
}
2、mapActions/mapMutations
import {mapMutations,mapActions} from 'vuex'
export default{
methods:{
//借助MapMutations生成对应的方法,方法中会调用commit去联系
//之前参数是通过this.$store.commit(JIA",this.n)中的n传参,但是现在没有
//需要在每次调用的时候利用call(n)来传参
//同样有对象写法和数组写法
...mapMutations({call:'JIA'})
//原理和mapActions一样,用于帮助生成与actions对话的方法
...mapActions({call:'jia'})
}
}
四、vuex模块化
将vuex中不同的功能模块封装起来,以后不同options可以写成不同options.js文件,然后在index.js主文件中引用,实现模块化。
const options1={
namespaced:true,
actions:{},
mutations:{},
state:{},
getters:{},
}
const options2={
namespaced:true,
actions:{},
mutations:{},
state:{},
getters:{},
}
export default new Vuex.Store({
modules:{
options1,
options2
}
})
//两个模块存放在state中,后续拿可以用mapState(['options1','options2']),拿到,但是后续使用数据需要options1.xxx,options2.xxx。
//为了简便,可以使用如下函数,但是前提是namespaced设置为true
mapState(options1,['sum','school','subject'])
//普通写法也能用
//也可以用this.$store.state.options1.xxx去拿到
this.$store.commit('options1/JIA',this.n)
//state和getters写法不一样
this.$store.getters[options1/xxx]