Vuex核心屬性(上)

2022-02-14 04:18:26 字數 1399 閱讀 5892

state : 單一狀態樹(單一資料來源),主要是用來存放狀態的  如: count:0

getters :類似於單個元件裡面的計算屬性

mutations : 狀態更新的唯一方式: commit mutations   

主要分為2部分:

1.字串的事件型別

increment(state)    在這裡面 increment   就是字串的事件型別

2.回到函式(第乙個引數就是state)

increment(state)   在這裡面 (state)  就是**函式

通過mutations更新,

通過commit  如:

increment:function()

mutations裡面的接收方式:

incrementcount(state,count)

普通方式提交過來的只是   變數
//2.特殊的提交方式
//type:存放字串事件型別
addcount(count))

}mutations裡面的接收方式:

incrementcount(state,payload)

特殊方式提交過來的引數是個物件 所以應該用物件來接收

mutatioin的響應規則

store中的state  只要定義屬性之後,這些屬性都會加入到響應式系統中,而響應式系統會監聽屬性的變化,當屬性發生變化時,會通知所有介面中用到該屬性的地方,讓介面發生變化

響應式的給陣列物件新增一條資料,需要用  state.陣列物件名字.push(引數:傳過來的那條資料)

或者單純的給物件新增乙個key跟value  :響應式的新增: vue.set(state.物件名,key,value)   例子: vue.set(state.info,'address','廣州')

響應式的刪除物件中的某個屬性 :   vue.delete(state.物件名,屬性名)  例子: vue.delete(state.info, 'age')

mutation的命名規範問題                 

在mutation中,官方建議:定義變數名(這樣說應該沒錯)

在store資料夾中再次建立乙個mutations-types.js檔案,在該檔案中定義變數名  ,舉個例子:export const increment ='increment'

在store下面的index.js中採用以下的方式:

先導入mutations-types.js  檔案:  import * as types from "./store/mutations-types";

然後在mutations中就可以按照以下的方式使用了。

[types.increment](state)

Vuex 核心屬性 下

modules 可以定義新的模組 官方上說,當我們的應用變的非常複雜時,store物件就有可能變得相當臃腫 為了解決這個問題,vuex允許我們將store分割成模組 module 在這裡,每個模組都擁有自己的state mutations actions getters等 寫個例子吧 首先我們來宣告...

Vuex 核心屬性 中

mutation同步函式 在mutations 中 使用非同步操作的話,頁面上devtools工具無法跟蹤資訊。所以在mutations中的方法必須是同步方法 action的基本定義 我們強調,不要再mutation中進行非同步操作,但再某些情況下,我們確實希望再vuex中使用非同步操作 網路請求等...

Vuex的五個核心屬性及輔助函式

vuex是什麼?vuex是乙個專門為vue.js應用程式開發的狀態管理模式,它採用了集中式儲存和管理程式所有元件的狀態 主要包括幾個模組 state 儲存所有的變數 state是乙個物件 mutations 直接操作state中的資料 actions 只能呼叫mutations中的方法 getter...