import {mapState,mapGetters} from 'vuex'
export default {
name: "index",
computed:{
...mapState(['count']),6
...mapGetters(['filterNumbers']),
...mapGetters({
antherNumbers:'filterNumbers'
}）
}
}
如果用同一名字直接把數組作為參數，如果想改一個名字，可以傳入一個對象作為參數，結果如下：
4.3.mutation
在組件內，來自store的數據只能讀取，不能手動改變，改變store中數據唯一的途徑就是顯示的提交mutations。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個參數。改變代碼如下：
// store/index.js
mutations: {
add(state){
state.count++;
}
},
// Index組件
**
**
methods:{
add(){
this.$store.commit('add');
console.log(this.count);
}
連續點擊5次增加按鈕，發現count的值也改變了。當然，我們也可以傳參進去
// store/index.js
mutations: {
add(state,n){
state.count+=n;
}
},
// Index組件
**
**
methods:{
add(){
this.$store.commit('add'，10);
console.log(this.count);
}
觸發方法語句為：this.$store.commit(方法名);也可以使用輔助函數mapMutations代替：
methods:{
...mapMutations(['add']),
}
4.4.action
前面我們講過，mutation有必須同步執行這個限制，我們在業務需求中有時候需要在獲取ajax請求數據之後再操作或定時器操作數據，這些都屬於異步請求，要用actions來實現。具體實現如下：
// store/index.js
mutations: {
changeCount(state){
state.count=3000;
}
},
actions: {
changeCount3000s(context){
setTimeout(()=>{
context.commit('changeCount')
},3000)
// Index組件
methods:{
...mapMutations(['add']),
changeCount3000s(){
this.$store.dispatch('changeCount3000s');
}
}
我們在點擊按鈕3s後count的值改變為3000，我們可以通過this.$store.dispatch(方法名)來觸發事件，也可以通過輔助函數mapActions來觸發。
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
methods:{
...mapMutations(['add']),
...mapActions(['changeCount3000s'])
}
學會以上幾個屬性的使用基本就可以滿足平時業務中的需求了，但使用Vuex會有一定的門檻和複雜性，它的主要使用場景是大型單頁面應用，如果你的項目不是很複雜，用一個bus也可以實現數據的共享，但是它在數據管理，維護，還只是一個簡單的組件，而Vuex可以更優雅高效地完成狀態管理，所以，是否使用Vuex取決於你的團隊和技術儲備。
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
閱讀更多 前端程序猿wfc 的文章
