vuex中mutation和action的詳細區別
阿新 • • 發佈:2020-12-10
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })
1、流程順序
“相應檢視—>修改State”拆分成兩部分,檢視觸發Action,Action再觸發Mutation。
2、角色定位
基於流程順序,二者扮演不同的角色。
Mutation:專注於修改State,理論上是修改State的唯一途徑。
Action:業務程式碼、非同步請求。
3、限制
角色不同,二者有不同的限制。
Mutation:必須同步執行。
Action:可以非同步,但不能直接操作State
二、普通函式和箭頭函式的區別
箭頭函式:
let fun = () => { console.log('lalalala'); }
普通函式:
function fun() { console.log('lalla'); }
箭頭函式相當於匿名函式,並且簡化了函式定義。箭頭函式有兩種格式,一種只包含一個表示式,連{ ... }和return都省略掉了。還有一種可以包含多條語句,這時候就不能省略{ ... }和return。
(1)箭頭函式是匿名函式,不能作為建構函式,不能使用new
let FunConstructor = () => { console.log('lll'); } let fc = new FunConstructor();
(2)箭頭函式不繫結arguments,取而代之用rest引數...解決
function A(a){ console.log(arguments); } A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] let B = (b)=>{ console.log(arguments); } B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined let C = (...c) => { console.log(c); } C(3,82,32,11323); // [3, 82, 32, 11323]
(3)箭頭函式不繫結this,會捕獲其所在的上下文的this值,作為自己的this值
var obj = { a: 10, b: () => { console.log(this.a); // undefined console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} }, c: function() { console.log(this.a); // 10 console.log(this); // {a: 10, b: ƒ, c: ƒ} } } obj.b(); obj.c(); var obj = { a: 10, b: function(){ console.log(this.a); //10 }, c: function() { return ()=>{ console.log(this.a); //10 } } } obj.b(); obj.c()();
(4)箭頭函式通過call()或apply()方法呼叫一個函式時,只傳入了一個引數,對this並沒有影響。
let obj2 = { a: 10, b: function(n) { let f = (n) => n + this.a; return f(n); }, c: function(n) { let f = (n) => n + this.a; let m = { a: 20 }; return f.call(m,n); } }; console.log(obj2.b(1)); // 11 console.log(obj2.c(1)); // 11
(5)箭頭函式沒有原型屬性
var a = ()=>{ return 1; } function b(){ return 2; } console.log(a.prototype); // undefined console.log(b.prototype); // {constructor: ƒ}
(6)箭頭函式不能當做Generator函式,不能使用yield關鍵字
總結:
- 箭頭函式的this永遠指向其上下文的 this,任何方法都改變不了其指向,如call(), bind(),apply()
- 普通函式的this指向呼叫它的那個物件