vuex 簡單使用步驟梳理,輕鬆掌握 附原始碼

2022-01-11 19:40:25 字數 1658 閱讀 9184

-----------------------往期-----------------------------

vuex - 學習日記

vuex - 輔助函式學習

vuex - 常用命令學習及用法整理

vuex - 專案結構目錄及一些簡單配置

-----------------------正文-----------------------------

首先,目錄結構依然如下:

按配置順序來說:

store.js(有時也命名為index.js)頁面

store配置主要分以下幾大塊:

第一,引入依賴

vue和vuex不用說,getters、actions、mutations三個是用來增刪改查store的,

再引入一些自己需要的依賴,比如store中用到資料請求時,引入$axios,

如需根據狀態切換路由,再引入router

如需要設定儲存sessionstore時再引入自命名的ls配置檔案等。

第二,使用vuex

vue.use(vuex)
第三,定義vuex資料狀態

let state =
第四,業務邏輯處理

自己需要使用store所做的一些業務邏輯,可以在這裡定義處理了。

第五,輸出

1 export const store = new

vuex.store();

接下來,store裡邊設定了state資料,想要取到的話,就去getters裡邊設定

getters.js頁面

我這裡偷個懶,全部丟擲了自己的state,然後使用時直接state.屬性了。

修改store資料三步走 - 流程如下

vue元件中dispatch、action.js中commit、mutations.js檔案中執行

1.元件內部dispatch分發任務

2.action.js傳達任務

3. mutations.js裡邊執行具體任務

多了乙個mutation-type.js,他的作用是給mutations裡邊定義變數名稱用的。

具體為什麼非要這麼分出來寫下,除了便於管理之外,我也不知道更好的理由了。

vuex簡單使用

當我們想要從乙個元件傳遞乙個引數到另外乙個元件的時候,這兩個元件不是父子元件,也不是兄弟元件,這樣我們就可以用vuex 乙個集中存貯資料的公共倉庫 我覺得官網用於計算變數的在實際中並不是很常用,通常使用vuex就是儲存一些變數,比如我在登入的時候獲取到使用者名稱,要展示在內頁裡,我就會把這個使用者名...

Vuex 簡單使用

安裝vuex vuex官方文件 npm install vuex svue中使用vuex store index.js import vue from vue import vuex from vuex vue.use vuex const store newvuex.store getters m...

vuex 簡單使用

export default new vuex.store mutations actions 解構 context物件,context與store例項具有相同的屬性和方法。這裡commit 就是 store.commit getlists 元件內使用 created 一般都在 computed 獲...