1.什么是vuex?
专门在vue中实现集中式状态(数据)管理的一个Vue插件,对vue中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,适用于任意组件间的通信
2.什么时候使用vuex?
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
3.vuex的使用
1.安装vuex
npm i vuex --save
2.js入口文件中引入store实例
src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
//创建vue实例
new Vue({
el:'#app',
render:h=>h(App),
store
})
3.引入vuex并使用
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//使用
export default new Vuex.Store({
state:{
sum:0
},
actions:{},
mutations : {
ADD(state,value){
state.sum+=value
}
},
getters:{},
})
4.使用:
store
: 读取数据
第一种方式:this.$store.state.sum
第二种方式:借助mapState
生成计算属性,从state中映射数据。使用的时候直接插值语法{{sum}}
import {mapState} from 'vuex'
computed:{
...mapState({sum:'sum'})//对象写法
...mapState(['sum'])//数组写法(简写)
}
commit
:修改数据
Mutation
: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
第一种方式:
methods:{
increment(value){
this.$store.commit('ADD',3)
}
}
第二种方式:参数必须在调用时传递(实参)
<button @click="increment(n)">加+</button>
import {mapMutations} from 'vuex'
export default{
data(){
return{
n:2
}
},
methods:{
//借助mapMutations生成对应的方法
...mapMutaions({increment:'ADD',abc:'ABC'}),//对象写法
...mapMutaions(['ADD']),//数组写法,此时调用函数时绑定函数为ADD,即<button @click="ADD(n)">加+</button>
}
}
3.Action
: 类似于mutation,不同在于:
- Action提交的是mutation,而不是直接变更状态
- Action可以包含任意异步操作
使用:
1.store中定义actions
mutations:{
ADD(state,value){
state.sum+=value
}
},
actions: {
addWait (context,value) {
setTimeout(()=>{
context.commit('ADD',value)
},1000)
}
}
2.触发:
第一种方式:this.$store.dispatch('action中的方法名',数据)
第二种方式:参数必须在调用时传递(实参)
<button @click="incrementOdd(5)">等一秒钟再加+</button>
import {mapActions} from 'vuex'
methods:{
...mapActions({incrementOdd:'addWait'}),//对象写法
...mapActions(['addWait']),//数组写法,此时调用函数时绑定函数为ADD,即<button @click="addWait(5)">等等再加+</button>
}
4.Getters
: store的计算属性,用于将state中的数据进行加工
- 加工数据
getters:{
bigSum(state,getters){
return state.sum*10
}
}
- 使用数据:
第一种方式:<span>乘积结果为:{{$store.getters.bigSum}}</span>
第二种方式:借助mapGetter生成计算属性,从getters中映射数据。
import {mapGetters} from 'vuex'
computed:{
...mapGetters({bigSum:'bigSum'})//对象写法
...mapGetters(['bigSum'])//数组写法(简写)
}
以上所有的映射函数mapState
mapMutations
mapActions
mapGetters
在多数据或状态时使用在项目中能帮助我们实现快速简便开发