vuex全解說-- mapState, getters帶參數, mapGetters, 展開運算符...
文章推薦指數： 80 %
mapGetters 輔助函數與前面提到的 mapState 用法相近，可以簡化程式碼。
文章加密
;
2019年5月22日星期三
vuex全解說--mapState,getters帶參數,mapGetters,展開運算符...,
這個有很多章，下面的圖片就是從這個的第一章來的
https://jeremysu0131.github.io/Vue-js-Vuex-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-3-%E7%B0%A1%E5%96%AE%E6%87%89%E7%94%A8/
看到https://jeremysu0131.github.io/Vue-js-Vuex-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-8-actions-%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5/
我們用一個更加實際的例子來調用異步API與分發多重mutations：
在actions中使用async/await
上面这两句的部份看不懂
1.mapState輔助函數
當一個組件需要獲取多個state的時候，如果每次都要宣告為computed會很麻煩，為了解決這個問題Vuex讓我們可以使用mapState輔助函數來幫助我們，將繁瑣的流程簡化。
使用方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
store
1
2
3
4
5
6
7
8
9
10
11
12
13
conststore=newVuex.Store({
state:{
todos:[
{id:1,text:'...',done:true},
{id:2,text:'...',done:false}
]
},
getters:{
getTodoById:(state)=>(id)=>{
returnstate.todos.find(todo=>todo.id===id)
}
}
})
component
1
2
3
4
5
6
7
computed:{
getTodoById(){
returnthis.$store.getters.getTodoById(2);
}
}
//{"id":2,"text":"...","done":false}
3.mapGetters輔助函數
mapGetters 輔助函數與前面提到的 mapState 用法相近，可以簡化程式碼。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
當新增新的屬性到物件時，你應該：
使用 UseVue.set(obj,'newProp',123)
或是以新物件替換舊物件，例如我們可以利用物件展開運算符來寫：
1
state.obj={...state.obj,newProp:123}
6.使用常量提供mutations類型(這個還沒有懂)
在各種Flux實現中，使用常量用於mutations類型是一種常見的模式，這樣可以使IDE中的各式linter工具發揮作用，並將所有常量放在一個文件中，讓你的協作者可以快速瀏覽整個應用程序中可能發生的變化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//mutation-types.js
exportconstSOME_MUTATION='SOME_MUTATION'
//store.js
importVuexfrom'vuex'
import{SOME_MUTATION}from'./mutation-types'
conststore=newVuex.Store({
state:{...},
mutations:{
//我們可以使用ES2015風格的計算屬性命名功能來使用一個常量作為函數名
[SOME_MUTATION](state){
//mutatestate
}
}
})
用不用常量取決於自己，但在需要多人協作的大型項目中使用會很有幫助。
7.在組件中提交mutations
我們可以在組件中使用 this.$store.commit('xxx') ，提交mutations或者使用 mapMutations 輔助函數將組件中的methods映射為 store.commit 來調用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
exportdefault{
//...
methods:{
...mapMutations([
'increment',//將`this.increment()`映射為`this.$store.commit('increment')`
//`mapMutations`也支援payloads:
'incrementBy'//將`this.incrementBy(amount)`映射為`this.$store.commit('incrementBy',amount)`
]),
...mapMutations({
add:'increment'//將`this.add()`映射為`this.$store.commit('increment')`
})
}
}
只是將`this.increment()`映射為`this.$store.commit('increment')`，不能直接把它拿去@click="increment"，又不能寫一樣的名稱如下
methods:{
getapi(){
this.getapi()//這樣會執行失敗，因為Errorinv-onhandler:"RangeError:Maximumcallstacksizeexceeded"
}
}
8.Actions簡化程式碼
在實際情況中，我們常會使用ES2015中的 參數解構 來簡化程式碼：
原來
actions:{
increment(context){
context.commit("increment");
}
}
簡化後
1
2
3
4
5
actions:{
increment({commit}){
commit('increment')
}
}
相似的简写法还有dispatch,state，例子如下
actions:{
//...
actionB({dispatch,commit}){
returndispatch('actionA').then(()=>{
commit('someOtherMutation')
})
}
}
actions是用在异步执行，以下说明一些例子（配合newPromise）
state:{
count:10,
},
mutations:{
increment(state,n=3){
state.count+=n;
}
},
actions:{
increment(context){
context.commit('increment');
},
asyncIncrement(context){
returnnewPromise(resolve=>{
setTimeout(()=>{
context.commit('increment');
resolve();
},3000)
})
},
incrementAsync({commit}){
setTimeout(()=>{
commit('increment')
},1000)
}
}
//console.log结果是10，一点下去就会出现，不会等一秒！
//console.log结果是13
延伸文章資訊
- 1[Vue.js] Vuex 學習筆記(5) - getters 的核心概念 - iT 邦幫忙
magGetters 輔助函數. mapGetters 輔助函數與前面提到的 mapState 用法相近，可以簡化程式碼。 <template> <div> ...
- 2vue中getters、...mapGetters的使用 - 简书
关于getters如何使用,可以看一下上面代码的注释,这里我重点介绍一下getters和computed的不同,就是上面的第三种用法,我之前在vue进阶系列中探讨 ...
- 3[Vue] Vuex 是什麼? 怎麼用? — Getters (3/5) | by itsems - Medium
... 把api 抓回來的值丟進state 裡面： 然後在computed 的mapGetters 加上剛剛的getteers returnFn ，並在methods 裡面寫上template ...
- 4vuex 中輔助函數mapGetters的基本用法詳解 - WalkonNet
mapGetters 輔助函數. mapGetters 輔助函數僅僅是將store 中的getter 映射到局部計算屬性：. 1、在組件或界面中不使用mapGetter調用映射vuex中的 ...
- 5vuex里mapState,mapGetters使用详解- 云+社区- 腾讯云
一、基本用法. 1. 初始化并创建一个项目 vue init webpack-simple vuex-demo cd vuex-demo npm install. 2. 安装vuex npm i...
