1桩蓉,vuex的概述
vex,是一個專門為vue設(shè)計的集中式狀態(tài)管理架構(gòu)劳闹,你可以把他理解為在data中的屬性可以共享給其他vue組件使用院究,也可以理解為vuex是包含全局?jǐn)?shù)據(jù)和變量的插件。
2玷或,vuex的使用
1,在使用之前儡首,我們需要安裝vuex
npm install vuex --save
2,新建store文件夾,在其下建立store.js偏友,在其中引用vue和vuex
import Vue from 'vue';
import Vuex from 'vuex';
3,使用vuex蔬胯, 引用vue.use 進行引用
Vue.use(Vuex);
state
state:可以說是vuex中的全局訪問狀態(tài)對象,也可以理解為全局變量位他,常用的三種訪問方式:
1氛濒,通過store來直接賦值
this.$store.state.count
2,通過mapState的對象來賦值
import {mapState} from 'vuex';
computed:mapState({
count:state=>state.count //理解為傳入state對象鹅髓,修改state.count屬性
})
3舞竿,通過mapState的數(shù)組來賦值
computed:mapState(["count"])
Mutations
Mutations是唯一能夠更改state狀態(tài)的方式,通過commit一個Mutations來更改窿冯,而在Mutations中可以傳入state的參數(shù)骗奖,并且還有接收叫做payload(載荷)的東東作為第二個參數(shù),這個東東是用來記錄開發(fā)者使用該函數(shù)的一些信息醒串。
1执桌,提交Mutations
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
const mutations={
add(state,n){
state.count+=n;
},
reduce(state){
state.count-=1;
}
}
2,獲取Mutations的方法
import { mapState,mapMutations } from 'vuex';
methods:mapMutations([
'add','reduce'
]),
<button @click="reduce">-</button>
3,getters
getters從表面是獲得的意思,可以把他看作在獲取數(shù)據(jù)之前進行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個過濾和加工芜赌。你可以把它看作store.js的計算屬性仰挣。
const getters = {
count:function(state){
return state.count +=100;
}
}
然后可以在vue組件中可以使用getters
computed:{
...mapState(["count"]),
count(){
return this.$store.getters.count;
}
},
actions
actions和之前講的Mutations功能基本一樣,不同點是缠沈,actions是異步的改變state狀態(tài)膘壶,而Mutations是同步改變狀態(tài)错蝴。至于什么是異步什么是同步這里我就不做太多解釋了,如果你不懂自己去百度查一下吧颓芭。
actions的使用
const actions ={
addAction(context){
context.commit('add',10)
},
reduceAction({commit}){
commit('reduce')
}
}
在vue的組件中使用
methods:{
...mapMutations([
'add','reduce'
]),
...mapActions(['addAction','reduceAction'])
},
傳參的actions:需要手動傳參
this.$store.dispatch('fun',this.checkedNames);