真正掌握vuex的使用方法（七）完結

今天是關於vuex的最後一篇文章了！怎麼說呢？且行且珍惜吧!！認真嘗試每一行**！

之前的文章當中，我們把所有的資料都存放到了 vuex資料夾當中的store.js當中。但隨著將來專案的複雜度增大，共享的狀態越來越多，越來越複雜！在這個時候我們需要將狀態根據功能來對其進行模組化，同時也是為了便於將來的維護，所以分開寫會更好一些。

今天我們主要來學習一下module:狀態管理器的模組化操作。

假如專案中包括兩個模組，分別為廣告模組與使用者模組。

首先在src資料夾下新建乙個vuex資料夾，然後在該資料夾下新建乙個index.js檔案用於生成store物件。然後在vuex資料夾下新建adv與user資料夾，最後分別在這兩個資料夾內建立乙個index.js檔案。如圖

vuex/adv/index.js檔案存放的是廣告模組的內容。**為：

//
在該檔案中可以單獨設定adv相關的狀態
const state=
export 
default

vuex/user/index.js檔案存放的是使用者模組內容。**為：

//
在該檔案中可以單獨設定user相關的狀態
const state=
export 
default

在vuex/index.js中引入剛才定義的兩個模組，並通過modules匯出：

import vue from 'vue';//
引入vue
import vuex from 'vuex';//
引入vuex
import axios from "axios";
import adv from "./adv";//
引入vuex的adv模組
import user from "./user";//
引入vuex的user模組
vue.use(vuex);//
使用vuex
export default
new vuex.store(
})

配置main.js

匯入vuex,index.js為預設選中資料夾，在此可以省略

vue.config.productiontip = false

newvue(}

p>username:}

div>

輸出的格式可以簡化，將computed（計算屬性）調整下：

export default
, username()}}

然後模組中直接呼叫計算屬性即可：

<
div 
id>
<
p>advname:}
p>
<
p>username:}
p>
div>

或者通過mapstate來對computed進行設定,首先引入mapstate:

import  from "vuex";

然後修改computed:

export default
, username(state)})}
}

最後在頁面中渲染的內容為：

advname:我是乙個通欄廣告！

username:張培躍

接下來，我們來看一下如何通過mutation改變狀態值。

首先在adv/index.js中新增乙個mutation方法set_advname用於改變advname狀態:

const mutations=
}

在模板中呼叫，直接通過$store.commit(『方法名』,傳遞引數)。

<
div 
id>
<
p>advname:}
p>
<
p>username:}
p>
<
p><
input 
type
="button"
value
="改變advname"
@click
="$store.commit('set_advname','我是乙個富**廣告')"
>
p>
div>

現在，在user/index中也新增乙個mutation方法set_advname，這次改變的是username狀態:

const mutations=
}

最後點選按鈕，你會發現兩個模組中的set_advname均被觸發了！這說明mutation是不區分模組的。如果在不同模組中的mutation出現同名的方法，都會執行。

getters與actions與之前的定義與調取是一樣的，在此就不再描述了！

關於vuex共七篇文章，已完結！希望可以對各位學習vuex有所幫助！

真正掌握vuex的使用方法（七）完結

真正掌握vuex的使用方法（四）

Vuex使用方法（demo）

Vuex之getters的使用方法

真正掌握vuex的使用方法（七） 完結

真正掌握vuex的使用方法（四）

Vuex使用方法（demo）

Vuex之getters的使用方法

相關推薦

真正掌握vuex的使用方法（七）完結