大型應用程式狀態管理 VUEX Module

module：可以讓每乙個模組擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

怎麼用module？

一般結構?

const modulea = ,

mutations: ,

actions: ,

getters:

}

const moduleb = ,

mutations: ,

actions:

}

const store =newvuex.store()

模組內部的資料：①內部state，模組內部的state是區域性的，也就是模組私有的，比如是car.js模組state中的list資料，我們要通過this.$store.state.car.list獲取；②內部getter、mutation和action，仍然註冊在全域性命名空間內，這是為了多模組可以同時響應同一mutation；this.$store.state.car.cargetter的結結果是undefined，而通過this.$store.state.cargetter則可以拿到。

傳參：getters====()；actions====().

新建乙個專案體驗一下，通過vue –cli新建乙個專案vuemodule, 不要忘記安裝vuex.

1, 在src 目錄下新乙個login資料夾，在裡面新建index.js 用於存放login 模組的狀態。為了簡單起見，我把模組下的state, actions,mutations, getters 全放在index.js檔案中。

先簡單給它增加乙個狀態，username: 「sam」?

const state = ;

const mutations = ;

const actions = ;

const getters = ;

// 不要忘記把state, mutations等暴露出去。

exportdefault

2，在src 目錄下，再新建乙個 store.js 這是根store, 它通過modules 屬性引入 login模組。?

import vue from"vue";

import vuex from"vuex";

vue.use(vuex);

// 引入login 模組

import login from"./login"

exportdefaultnewvuex.store(

})

3, 在main.js中引入store, 並注入到vue 根例項中。?

import vue from'vue'

// 引入store

import store from"./store"

newvue()?

>

"./assets/logo.png"/>

元件中成功獲取到狀態。專案目錄和展示如下

4 ，通過actions, mutations 改變名字，這就涉及到dispatch action, commit mutations, mutations 改變state.

先在login 資料夾 index.js中新增changename action 和 change_name mutations.?

const mutations =

};

const actions = ,anothername)

};

在模組中，state 是被限制到模組的命名空間下，需要命名空間才能訪問。但actions 和mutations, 其實還有 getters 卻沒有被限制，在預設情況下，它們是註冊到全域性命名空間下的，所謂的註冊到全域性命名空間下，其實就是我們訪問它們的方式和原來沒有module 的時候是一樣的。比如沒有module 的時候，this.$store.dispatch(「actions」), 現在有了modules, actions 也寫在了module 下面（changename 寫到了login目錄下的index.js中），我們仍然可以這麼寫，this.$store.dispatch(「changename」)，元件中的getters, 也是通過 this.$store.getters.module中getters 來獲取。?

>

"./assets/logo.png"/>

change to json

6, 其實actions, mutations, getters, 也可以限定在當前模組的命名空間中。只要給我們的模組加乙個namespaced 屬性：?

const state = ;

const mutations =

};

const actions = ,anothername)

},

alertname()

};

const getters =

};

// namespaced 屬性，限定命名空間

exportdefault

當所有的actions, mutations, getters 都被限定到模組的命名空間下，我們dispatch actions, commit mutations 都需要用到命名空間。如 dispacth("changename"), 就要變成 dispatch("login/changename"); getters.localjobtitle 就要變成 getters["login/localjobtitle"]?

>

"./assets/logo.png"/>

change to json

有了命名空間之後，mapstate, mapgetters, mapactions 函式也都有了乙個引數，用於限定命名空間，每二個引數物件或陣列中的屬性，都對映到了當前命名空間中。?

大型應用程式狀態管理 VUEX Module

Web應用程式狀態管理

web應用程式狀態管理

WEB應用程式狀態管理

大型應用程式狀態管理 VUEX Module

Web應用程式狀態管理

web應用程式狀態管理

WEB應用程式狀態管理

相關推薦