vuex 使用文檔小結篇，vuex文檔小結

vuex 使用文檔小結篇，vuex文檔小結

Vuex是什嗎？

Vuex 是一個專為 Vue.js應用程式開發的狀態管理員模式。它採用集中式儲存管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel調試、狀態快照匯入匯出等進階調試功能。

安裝

直接下載CDN 引用

　　<script src="/path/to/vue.js"></script>　　<script src="/path/to/vuex.js"></script>

npm　

npm install vuex --save

在一個模組化的打包系統中，您必須顯式地通過Vue.use() 來安裝Vuex。　　

import Vue from 'vue'　　import Vuex from 'vuex'　　Vue.use(Vuex) 

　　Vuex 是一個專為Vue.js 應用程式開發 的狀態管理員模式，集中式儲存管理應用的所有組件狀態。

　　狀態管理組件含以下幾個部分狀態：

　　　　 state 驅動應用的資料來源；

  　　　　view 以生命方式將 state 映射到視圖。

   　　　　actions  響應在view 上的使用者書輸入導致的狀態變化。

 協助我們管理共用狀態，中大型單頁面應用。

 　　state

　　　　單一狀態樹 ，Vuex使用單一狀態樹用一個對象就包含了全部的應用程式層級狀態。

　　　　在Vue 組件中獲得Vuex 狀態。

　　　　由於Vuex的狀態儲存是響應式的，從store 執行個體中讀取狀態最簡單的方法

　　　　就是在計算屬性中返回某個狀態。

　　　　建立一個Counter 組件　　　

　const Counter = {　　　　　　　　template: '<div>{{ count }}</div>'　　　　　　　　computed: {　　　　　　　　　　count ()｛　　　　　　　　　　　　return store.state.count　　　　　　　　　　｝　　　　　　　　}　　　　　　}

　　每次 store.state.count 變化的時候，都會重新求取計算屬性，並且觸發更新相關的DOM

　　　　Vuex 通過 store 選項，提供了一種機制將狀態從根組件『注入』到每一個子組件中（需調用 Vue.use(Vuex)）：　　　　　

　const app = new Vue({　　　　　　　　el:'#app',　　　　　　　　// 把 store 對象提供給 “store” 選項，這可以把 store 的執行個體注入所 有的子組件　　　　　　　　store,　　　　　　　　components: {Counter},　　　　　　template: '　　　　　　　　<div class="app">　　　　　　　　　　<counter></counter>　　　　　　　　</div>　　　　　　　　'　　　　　　})

 　　通過在根執行個體中註冊 store 選項，該store 執行個體會註冊入到跟組件下的所有子組件，且子組件能通過 this.$store 訪問到。更新 counter 的實現：　　　　　

　const Counter = {　　　　　　　　template : '<div>{{ count }}</div>',　　　　　　　　computed: {　　　　　　　　　　count this.$store.state.count　　　　　　　　　　}　　　　　　}

　　　　mapState 輔助函數

　　　　　　當一個組件需要擷取多個狀態時候，將這些狀態都聲明為計算屬性會有些冗餘。

　　　　　　為瞭解決這個問題，我們可以使用 mapState 輔助函數協助我們產生計算屬性。　　　　　　

// 在單獨構建的版本中輔助函數為 Vuex.mapState　　　　　　import { mapState } from 'vuex'　　　　　　　　export default {　　　　　　　　　　computed: mapState({　　　　　　　　　　　　// 箭頭函數可以使代碼更簡潔　　　　　　　　　　　　　　count: state => state.count,　　　　　　　　　　　　// 傳字串參數 ‘count' 等同於 ‘state => state.count'　　　　　　　　　　　　　　countAlias: 'count',　　　　　　　　　　　　// 為了能夠使用 ‘this' 擷取局部狀態，必須使用常規函數　　　　　　　　　　　　　　countPlusLocalState(state) {　　　　　　　　　　　　　　　　　　return state.count + this.localCount　　　　　　　　　　　　　　　　}　　　　　　　　　　　　})　　　　　　　　　}

　　　　當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字串數組。　　　　　　　　　　

computed: mapState([　　　　　　　　　　　　// 映射 this.count 為 store.state.count　　　　　　　　　　　　'count'　　　　　　　　　　])

　　　　組件仍然保有局部狀態。

　　　　Getters

　　　　　　有時候我們需要從store 中的state 中 的state 中派生一些狀態，列如對列表進行過濾並計算。　

　　　　computed: {　　　　　　　　doneTodosCount() {　　　　　　　　　　　　return this.$store.state.todos.filter(todo => todo.done).length　　　　　　　　}　　　　　　}

　　　　Vuex 允許我們再store 中定義getters (可以認為是stroe 的計算屬性)

　　　　　　Getters 接受state 作為其第一個參數。　　　　　　　　

const store = new Vuex.Store({　　　　　　　　　　　　state: {　　　　　　　　　　　　　　todos:[　　　　　　　　　　　　　　　　{id:1, text: '...' ,done: true},　　　　　　　　　　　　　　　　{id:2,text:'...',done: false}　　　　　　　　　　　　　　]　　　　　　　　　　　　},　　　　　　　　　　getters: {　　　　　　　　　　　　doneTodos: state => {　　　　　　　　　　　　　　　　return state.todos.filter(todo=> todo.done)　　　　　　　　　　　　　　}　　　　　　　　　　　　}　　　　　　　　　　})

　　　　Getters 會暴露為store.getters 對象：　　　

　store.getters.doneTodos // [{id:1,text: '...',done:true}]

　　　　Getter 也可以接受其他getters 作為第二個參數：　　　　　

getters: {　　　　　　　　　　doneTodosCount: (state,getters) => {　　　　　　　　　　　　return getters.doneTodos.length　　　　　　　　　　}　　　　　　}　　　　store.getters.doneTodosCount // -> 1

　　　　　　我們可很容易的在任何組件中使用　　　　　　　

　computed: {　　　　　　　　　　doneTodosCount() {　　　　　　　　　　　　return this.$store.getters.doneTodosCount　　　　　　　　}　　　　　　}

　　　　mapGetters 輔助函數

　　　　mapGetters 輔助函數僅僅是 store 中的getters 映射到局部計算屬性。　　　　　　

import {mapGetter} form 'vuex'　　　　　　export default {　　　　　　　　computed: {　　　　　　　　　　// 使用對象展開運算子將 getters 混入　　　　　　　　　　...mapGetters([　　　　　　　　　　　　　　‘doneTodosCount',　　　　　　　　　　　　　　'anotherGetter'　　　　　　　　　　　　])　　　　　　　　　　}　　　　　　　　}

 　　如果你想講一個getter 屬性另取名字，使用對象性時

mapGetters({ 　　　　　　　　// 映射 this.doneCount 為 store.getters.doneTodosCount　　　　　　　　　　doneCount: 'doneTodosCount'　　　　　　})

　　　　　　　　　　Mutations

　　　　　　　　更改Vuex 的store 中的狀態的唯一方式就是提交 mutation Vuex 中的mutation

　　　　　　　　非常類似於事件，每個 mutation 都有一個字串的 事件類型 和回呼函數。這個回呼函數就是我們實際進行狀態更改的地方。並且他會接受 state 作為第一個參數。　　　　

const store = new Vue.Store({　　　　　　　　state: {　　　　　　　　　　　　count: 1　　　　　　　　},　　　　　　mutations: {　　　　　　　　　　inctement (state) {　　　　　　　　　　state.count++　　　　　　　　}　　　　　　}　　　　})

 　　當觸發一個類型為 increment 的 mutation 時，調用此函數。”要喚醒一個

 　　　　mutation handler，你需要以相應的 type 調用 store.commit 方法  　　　　

store.commit('increment')

　　　　　　提交載荷(Payload)

　　　　　　你可以向store.commit 傳入額外的參數，即mutation 的載荷：          　　

mutations: {　　　　　　　　　　increment (state, n) {　　　　　　　　　　state.count += n　　　　　　　　}　　　　　　}　　　　　　store.commit('increment', 10)

 　　在大多數情況下，載荷應該是一個對象，這樣可以包含多個欄位並且記錄 mutation會更易讀。　　　　　

mutations: {　　　　　　increment (state,payload) {　　　　　　　　state.count += payload.amount　　　　　　　　}　　　　　　}　　　　　　store.commit('increment', {　　　　　　　　amount:10　　　　})

　　對象風格的提交方式

　　　　提交mutation 的另一種方式直接使用包含 type 屬性的對象：　　　　

　store.commit({　　　　　　　　type: 'increment',　　　　　　　　amount:10　　　　　　})

　　當使用對象風格的提交方式，整個對象作為載荷傳給mutation 函數，因此handler保持不變：　　　　　

　mutations: {　　　　　　　　increment (state, payload) {　　　　　　　　　　state.count += payload.amount　　　　　　　　}　　　　　　　}

　　Mutations 需遵守vue 的響應規則

　　　　既然Vuex的store 中的狀態是響應式的，那麼當我們變更狀態時，監視狀態的vue更新 ，這也意味值Vue 中的mutation 也需要與使用 Vue 一樣遵守一些注意事項。

　　　　　　1. 最好提前在你的store 中初始化好所有的所需要的屬性。

　　　　　　2.當需要在對象上提交新屬性時，你應該使用　　　　　　　　

Vue.set(obj, 'newProp', 123)

　　　　　　使用新對象代替老對象  state.obj= {...state.obj ,newProp: 123}

　　　　　　使用常量替代 Mutation 事件類型

　　　　　　使用常量替代 mutation 事件類型在各種 Flux 實現中是很常見的模式　　　　　

export const SOME_MUTATION = 'SOME_MUTATION';　　　　　　import Vuex from 'vuex'　　　　　　import {SOME_MUTATION } from './mutation-types'　　　　　　const store = new Vuex.Store({　　　　　　　　　　state： {...}　　　　　　　　　　mutations: {　　　　　　　　　　　　// 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函數名　　　　　　　　　　　　[SOME_MUTATION] (state) {　　　　　　　　　　　　// mutate state　　　　　　　　　　　　}　　　　　　　　　　}　　　　　　})

mutation 必須是同步函數

　　　　一條重要的原則是記住 mutation 必須是同步函數。　　　　　　　

　mutations: {　　　　　　　　　　someMutation (state) {　　　　　　　　　　　　api.callAsyncMethod(() => {　　　　　　　　　　　　　　　　state.count++　　　　　　　　　　　　})　　　　　　　　　　}　　　　　　　　}

 在組件中提交 Mutations

　　　　你可以在組件中使用 this.$store.commit('xxx') 提交 mutation,或者使使用 mapMutations輔助函數將組建中的methods 映射為 store.commit 調用 (需要在根節點注入 store)　　　　

import {mapMutations} from 'vuex'　　　　　　expor default {　　　　　　　　methods: {　　　　　　　　　　mapMutations([　　　　　　　　　　　　　　methods: {　　　　　　　　　　　　　　　　mapMutations([　　　　　　　　　　　　　　　　　　'increment' // 映射 this.increment() 為 this.$store.commit('increment')　　　　　　　　　　]),　　　　　　　　mapMutations({　　　　　　　　　　　　　　add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')　　　　　　　　　　})　　　　　　　　}　　　　　　])　　　　　　}　　　　}

Actions  

　　　　在mutation 中混非同步呼叫會導致你的程式很難調試。

Actions

　　　　Action 類似於 mutation,不同在於。

　　　　Action 提交的是 mutation ,而不是直接變更狀態。

　　　　Action 可以包含任意非同步作業。

　　　　註冊一個簡單的 action　　　　

const store = new Vuex.Store({　　　　　　state: {　　　　　　　　　　count：0　　　　　　}，　　　　mutations: {　　　　　　increment (state) {　　　　　　　　state.count++　　　　　　}　　　　},　　　　actions: {　　　　　　　　increment (context){　　　　　　　　　　context.commit('increment')　　　　　　　　　　}　　　　　　　　}　　　　})

Action 函數接受一個與store 執行個體具有相同方法和屬性的context 對象，因此你可以調用 context.commit 提交一個mutation,或者通過 context.state 和context.getters 來擷取 state 和 getters 當我們在之後介紹到Modules時，你就知道 context 對象為什麼不是store 執行個體本身了。　　　

actions: {　　　　　　increment({commit}){　　　　　　　　commit('increment')　　　　　　}　　　　}

分發 Action

　　　　Action 通過 store.dispatch 方法觸發： 　　　　

store.dispatch('increment')

　　　　我們可以在 action 內部執行非同步作業。　　　

　actions: {　　　　　　incrementAsync({commit}){　　　　　　　　setTimeout(() => {　　　　　　　　　　commit('increment')　　　　　　　　},1000)　　　　　　　　}　　　　　　}

　　Actions 支援同樣的載荷方式和對象方式進行分發　　　　

　// 以載荷形式分發　　　　store.dispatch('incrementAsync',{　　　　　　amount:10　　　　})　　　　// 以對象形式分發　　　　　　store.dispatch({　　　　　　　　type: 'incrementAsync',　　　　　　　　amount:10　　　　　　})

 在組件中分發 Action

　　　　你在組件中使用 this.$store.dispatch('xxx') 分發 action,或者使用map Actions輔助函數將組件的methods 映射為store.dispatch 調用　　　

import {mapActions } from 'vuex'　　　　　　export default{　　　　　　　　methods:([　　　　　　　　　　'increment' // 映射 this.increment() 為 this.$store.dispatch('increment')　　　　　　　　])　　　　　　mapActions({　　　　　　　　　　add: 'inctement' // 映射 this.add() 為 this.$store.dispatch('increment')　　　　　　　　})　　　　　　}

組合 Actions

　　　　Action 通常是非同步，那麼如何知道 action 什麼時候結束。

　　　　你需要明白 store.dispatch 可以處理被處觸發的action 的回呼函數返回的Promise並且 store.dispatch 仍舊返回Promise　　　

actions: {　　　　　　　　actionA({commit}){　　　　　　　　return new Promise((resolve)=>{　　　　　　　　　　　　setTimeout (() => {　　　　　　　　　　　　　　commit('someMutation')　　　　　　　　　　　　　　resolve()　　　　　　　　　　　　},1000)　　　　　　　　　　})　　　　　　　　}　　　　　　}

　　現在你可以　　　　　

store.dispatch('actionA').then(()=>{　　　　　　　　//...　　　　　　})

　　在另一個 action 中也可以　　

actions: {　　　　　　actionB({dispath,commit}){　　　　　　　　return dispatch('actionA').then(() => { 　　　　　　　　commit('someOtherMutation')　　　　　　})　　　　}　　　　}

　　我們利用async/ await　　　

// 假設 getData() 和 getOther() 返回的是一個 Promis　　　　actions:{　　　　　　　　async actionA ({commit}){　　　　　　　　　　commit('gotData',await getData())　　　　　　　　},　　　　　　　　async actionB({dispatch,commit}){　　　　　　　　　　await dispatch('actionA') // 等待 actionA 完成　　　　　　　　　　commit('goOtherData', await getOtherData())　　　　　　　　}　　　　　　}

　　　　Modules

　　　　　　使用單一狀態樹，當應用變的很大的時候，store 對象會變的臃腫不堪。

　　　　　　Vuex 允許我們將store 分割到模組。每一個模組都有自己的state, mutation,action, getters, 甚至是嵌套子模組從上到下進行類似的分割。　　　　　

const moduleA = {　　　　　　　　　　state: {...},　　　　　　　　mutations: {...}　　　　　　　　actions: {...}　　　　　　　　getters:{...}　　　　　　　　}　　　　const moduleA = {　　　　　　　　state: {...},　　　　　　　　mutations: {...}　　　　　　　　actions: {...}　　　　　　}　　　　const store = new Vuex.Store({　　　　　　modules: {　　　　　　　　　　a:moduleA,　　　　　　　　　　b:moduleB　　　　　　　　}　　　　　　})　　　　store.state.a // -> moduleA 的狀態　　　　store.state.b // -> moduleB 的狀態

模組的局部狀態

　　　　對於模組內部的 mutation 和 getter, 接收的第一個參數是模組的局部狀態。　　

　const moduleA = {　　　　　　　　　　state: {count:0},　　　　　　　　　　mutations: {　　　　　　　　　　　　increment (state) {　　　　　　　　　　　　　　　　// state 模組的局部狀態　　　　　　　　　　　　　　　　state.count++　　　　　　　　　　　　}　　　　　　　　　　},　　　　　　getters: {　　　　　　　　doubleCount (state) {　　　　　　　　return state.count * 2　　　　　　　　}　　　　　　}　　　　}

 　　同樣對於模組內部的action, context.state 是局部狀態，根節點的窗檯石context.rootState:　　　　

const moduleA = {　　　　　　　　　　actions: {　　　　　　　　　　incrementIfOddOnRootSum ({state, commit ,rootState}) {　　　　　　　　　　　　if((state.count + rootState.count) %2 ===1){　　　　　　　　　　　　　　　　commit('increment')　　　　　　　　　　}　　　　　　　　　}　　　　　　　　}　　　　　　}

 對於模組內部的getter,跟節點狀態會作為第三個參數：　　　　　

const moduleA = {　　　　　　　　　　getters: {　　　　　　　　　　　　getters: {　　　　　　　　　　　　　　sumWithRootCount (state,getters,rootState) {　　　　　　　　　　　　　　　　　　　　　　return state.count + rootState.count　　　　　　　　　　　　　　　　}　　　　　　　　　　　　　　}　　　　　　　　　　}　　　　　　　　}

命名空間

　　　　模組內部的action, mutation , 和 getter 現在仍然註冊在全域命名空間    這樣保證了多個模組能夠響應同一 mutation 或 action. 也可以通過添加首碼 或者 尾碼的

　　　　　　方式隔離各個模組，以免衝突。　　　　　

// 定義 getter, action , 和 mutation 的名稱為常量，以模組名 ‘todo' 為首碼。　　　　　　　　export const DONE_COUNT = 'todos/DONE_COUNT'　　　　　　　　export const FETCH_ALL = 'todos/FETCH_ALL'　　　　　　　　export const TOGGLE_DONE = 'todos/TOGGLE_DONE' 　　　　　　　　 import * as types form '../types'　　　　// 使用添加瞭解首碼的名稱定義， getter, action 和 mutation 　　　　const todosModule = {　　　　　　　　state : {todo: []},　　　　　　　　getters: {　　　　　　　　　　[type.DONE_COUNT] (state) {　　　　　　　　　　}　　　　　　}　　　　actions: {　　　　　　　　[types.FETCH_ALL] (context,payload) {　　　　　　　}　　　　　　},　　　　mutations: {　　　　　　　　[type.TOGGLE_DONE] (state, payload)　　　　　　}　　　　}

模組動態註冊

　　　　在store 建立之後，你可以使用 store.registerModule 方法註冊模組。　　　　　

store.registerModule('myModule',{})

　　　　　　模組的狀態將是 store.state.myModule.

　　　　　　模組動態註冊功能可以使讓其他Vue 外掛程式為了應用的store 附加新模組

　　　　　　以此來分割Vuex 的狀態管理。

　　　　項目結構

　　　　　　Vuex 並不限制你的代碼結構。但是它規定了一些需要遵守的規則：

　　　　　　　　1.應用程式層級的狀態應該集中到單個store 對象中。

　　　　　　　　2.提交 mutation 是更改狀態的唯一方法，並且這個過程是同步的。

　　　　　　　　3.非同步邏輯應該封裝到action 裡面。

　　　　　　　　　　只要你遵守以上規則，如何組織代碼隨你便。如果你的 store 檔案太大，只需將 action、mutation、和 getters 分割到單獨的檔案對於大型應用，我們會希望把 Vuex 相關代碼分割到模組中。下面是項目結構樣本

├── index.html├── main.js├── api │ 　　└── ... # 抽取出API請求├── components│ ├── App.vue│ └── ...└── store 　　├── index.js  # 我們組裝模組並匯出 store 的地方 　　├── actions.js  # 根層級的 action 　　├── mutations.js  # 根層級的 mutation 　　└── modules  　　 　　├── cart.js  # 購物車模組  　　　　└── products.js # 產品模組