目錄

- 1.什么是vuex?

- 2.為什么要使用Vuex?

- 3.vuex的核心概念？||如何在組件中去使用vuex的值和方法？||在vuex中使用異步修改援岩？

- 4.vuex 輔助函數(shù)

- 5.action異步操作

- 6.vuex在vue-cli中的應(yīng)用

- 1.什么是vuex?

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)朋截，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化对供。

vuex

上圖中綠色虛線包裹起來的部分就是Vuex的核心, state中保存的就是公共狀態(tài), 改變state的唯一方式就是通過mutations進(jìn)行更改. 可能你現(xiàn)在看這張圖有點(diǎn)不明白, 等經(jīng)過本文的解釋和案例演示, 再回來看這張圖, 相信你會(huì)有更好的理解.

2. 為什么要使用Vuex?

試想這樣的場景, 比如一個(gè)Vue的根實(shí)例下面有一個(gè)根組件名為App.vue, 它下面有兩個(gè)子組件A.vue和B.vue, App.vue想要與A.vue或者B.vue通訊可以通過props傳值的方式, 但是如果A.vue和B.vue之間的通訊就很麻煩了, 他們需要共有的父組件通過自定義事件進(jìn)行實(shí)現(xiàn), A組件想要和B組件通訊往往是這樣的:

組件通訊

• A組件說: "報(bào)告老大, 能否幫我托個(gè)信給小弟B" => dispatch一個(gè)事件給App
• App老大說: "包在我身上, 它需要監(jiān)聽A組件的dispatch的時(shí)間, 同時(shí)需要broadcast一個(gè)事件給B組件"
• B小弟說: "信息已收到", 它需要on監(jiān)聽App組件分發(fā)的事件

這只是一條通訊路徑, 如果父組件下有多個(gè)子組件, 子組件之間通訊的路徑就會(huì)變的很繁瑣, 父組件需要監(jiān)聽大量的事件, 還需要負(fù)責(zé)分發(fā)給不同的子組件, 很顯然這并不是我們想要的組件化的開發(fā)體驗(yàn).

Vuex就是為了解決這一問題出現(xiàn)的

3. Vuex的核心概念?

在介紹Vuex的核心概念之前, 我使用vue-cli初始化了一個(gè)demo, 準(zhǔn)備以代碼的形式來說明Vuex的核心概念.這個(gè)demo分別有兩個(gè)組件ProductListOne.vue和ProductListTwo.vue, 在App.vue的datat中保存著共有的商品列表, 代碼和初始化的效果如下圖所示:

引入Vuex
下載vuex: npm install vuex --save
在main.js添加:

import Vuex from 'vuex'

Vue.use( Vuex );

const store = new Vuex.Store({
    //待添加
})

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

初始化效果

//App.vue中的初始化代碼

<template>
<div id="app">
    <product-list-one v-bind:products="products"></product-list-one>
    <product-list-two v-bind:products="products"></product-list-two>
</div>
</template>

<script>
import ProductListOne from './components/ProductListOne.vue'
import ProductListTwo from './components/ProductListTwo.vue'

export default {
    name: 'app',
    components: {
        'product-list-one': ProductListOne,
        'product-list-two': ProductListTwo
    },
    data () {
        return {
            products: [
                {name: '鼠標(biāo)', price: 20},
                {name: '鍵盤', price: 40},
                {name: '耳機(jī)', price: 60},
                {name: '顯示屏', price: 80}
            ]
        }
    }
}
</script>

<style>
body{
    font-family: Ubuntu;
    color: #555;
}
</style>

//ProductListOne.vue
<template>
    <div id="product-list-one">
        <h2>Product List One</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data () {
        return {

        }
    }
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}
</style>

//ProductListTwo.vue
<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data () {
        return {

        }
    }
}
</script>

<style scoped>
#product-list-two{
    background: #D1E4FF;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-two ul{
    padding: 0;
    list-style-type: none;
}
#product-list-two li{
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #860CE8;
    display: block;
}
</style>

核心概念1: State

state就是Vuex中的公共的狀態(tài), 我是將state看作是所有組件的data, 用于保存所有組件的公共數(shù)據(jù).

• 此時(shí)我們就可以把App.vue中的兩個(gè)組件共同使用的data抽離出來, 放到state中,代碼如下:

//main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.use( Vuex )

const store = new Vuex.Store({
  state:{ 
    products: [
      {name: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', price: 60},
      {name: '顯示屏', price: 80}
    ]
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

• 此時(shí),ProductListOne.vue和ProductListTwo.vue也需要做相應(yīng)的更改

//ProductListOne.vue
export default {
    data () {
        return {
            products : this.$store.state.products //獲取store中state的數(shù)據(jù)
        }
    }
}

//ProductListTwo.vue
export default {
    data () {
        return {
            products: this.$store.state.products //獲取store中state的數(shù)據(jù)
        }
    }
}

• 此時(shí)的頁面如下圖所示, 可以看到, 將公共數(shù)據(jù)抽離出來后, 頁面沒有發(fā)生變化.

  state效果

核心概念2: Getters

我將getters屬性理解為所有組件的computed屬性, 也就是計(jì)算屬性. vuex的官方文檔也是說到可以將getter理解為store的計(jì)算屬性, getters的返回值會(huì)根據(jù)它的依賴被緩存起來位他，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

• 此時(shí),我們可以在main.js中添加一個(gè)getters屬性, 其中的saleProducts對(duì)象將state中的價(jià)格減少一半(除以2)

//main.js
const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', price: 60},
      {name: '顯示屏', price: 80}
    ]
  },
  getters:{ //添加getters
    saleProducts: (state) => {
      let saleProducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleProducts;
    }
  } 
})

• 將productListOne.vue中的products的值更換為this.$store.getters.saleProducts

export default {
    data () {
        return {
            products : this.$store.getters.saleProducts 
        }
    }
}

• 現(xiàn)在的頁面中,Product List One中的每項(xiàng)商品的價(jià)格都減少了一半

getters效果

核心概念3: Mutations

我將mutaions理解為store中的methods, mutations對(duì)象中保存著更改數(shù)據(jù)的回調(diào)函數(shù),該函數(shù)名官方規(guī)定叫type, 第一個(gè)參數(shù)是state, 第二參數(shù)是payload, 也就是自定義的參數(shù).

• 下面,我們?cè)?code>main.js中添加mutations屬性,其中minusPrice這個(gè)回調(diào)函數(shù)用于將商品的價(jià)格減少payload這么多, 代碼如下:

//main.js
const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', price: 60},
      {name: '顯示屏', price: 80}
    ]
  },
  getters:{
    saleProducts: (state) => {
      let saleProducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleProducts;
    }
  },
  mutations:{ //添加mutations
    minusPrice (state, payload ) {
      let newPrice = state.products.forEach( product => {
        product.price -= payload
      })
    }
  }
})

• 在ProductListTwo.vue中添加一個(gè)按鈕,為其添加一個(gè)點(diǎn)擊事件, 給點(diǎn)擊事件觸發(fā)minusPrice方法

//ProductListTwo.vue
<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            <button @click="minusPrice">減少價(jià)格</button> //添加按鈕
        </ul>
    </div>
</template>

• 在ProductListTwo.vue中注冊(cè)minusPrice方法, 在該方法中commitmutations中的minusPrice這個(gè)回調(diào)函數(shù)
  注意:調(diào)用mutaions中回調(diào)函數(shù), 只能使用store.commit(type, payload)

//ProductListTwo.vue
export default {
    data () {
        return {
            products: this.$store.state.products
        }
    },
    methods: {
        minusPrice() {
            this.$store.commit('minusPrice', 2); //提交`minusPrice,payload為2
        }
    }
}

• 添加按鈕, 可以發(fā)現(xiàn), Product List Two中的價(jià)格減少了2, 當(dāng)然你可以自定義payload,以此自定義減少對(duì)應(yīng)的價(jià)格.

  mutations效果

  (Product List One中的價(jià)格沒有發(fā)生變化, 是因?yàn)?code>getters將價(jià)格進(jìn)行了緩存)

核心概念4: Actions

actions 類似于 mutations产场，不同在于：

• actions提交的是mutations而不是直接變更狀態(tài)

• actions中可以包含異步操作, mutations中絕對(duì)不允許出現(xiàn)異步

• actions中的回調(diào)函數(shù)的第一個(gè)參數(shù)是context, 是一個(gè)與store實(shí)例具有相同屬性和方法的對(duì)象

• 此時(shí),我們?cè)?code>store中添加actions屬性, 其中minusPriceAsync采用setTimeout來模擬異步操作,延遲2s執(zhí)行 該方法用于異步改變我們剛才在mutaions中定義的minusPrice

//main.js
const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠標(biāo)', price: 20},
      {name: '鍵盤', price: 40},
      {name: '耳機(jī)', price: 60},
      {name: '顯示屏', price: 80}
    ]
  },
  getters:{
    saleProducts: (state) => {
      let saleProducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleProducts;
    }
  },
  mutations:{
    minusPrice (state, payload ) {
      let newPrice = state.products.forEach( product => {
        product.price -= payload
      })
    }
  },
  actions:{ //添加actions
    minusPriceAsync( context, payload ) {
      setTimeout( () => {
        context.commit( 'minusPrice', payload ); //context提交
      }, 2000)
    }
  }
})

• 在ProductListTwo.vue中添加一個(gè)按鈕,為其添加一個(gè)點(diǎn)擊事件, 給點(diǎn)擊事件觸發(fā)minusPriceAsync方法

<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            <button @click="minusPrice">減少價(jià)格</button>
            <button @click="minusPriceAsync">異步減少價(jià)格</button> //添加按鈕
        </ul>
    </div>
</template>

• 在ProductListTwo.vue中注冊(cè)minusPriceAsync方法, 在該方法中dispatchactions中的minusPriceAsync這個(gè)回調(diào)函數(shù)

export default {
    data () {
        return {
            products: this.$store.state.products
        }
    },
    methods: {
        minusPrice() {
            this.$store.commit('minusPrice', 2);
        },
        minusPriceAsync() {
            this.$store.dispatch('minusPriceAsync', 5); //分發(fā)actions中的minusPriceAsync這個(gè)異步函數(shù)
        }
    }
}

• 添加按鈕, 可以發(fā)現(xiàn), Product List Two中的價(jià)格延遲2s后減少了5

  actions效果

核心概念5: Modules

由于使用單一狀態(tài)樹鹅髓，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)京景，store 對(duì)象就有可能變得相當(dāng)臃腫窿冯。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）确徙。每個(gè)模塊擁有自己的 state醒串、mutation、action鄙皇、getter芜赌、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

- 4.vuex 輔助函數(shù)

#mapState 輔助函數(shù)

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余伴逸。為了解決這個(gè)問題缠沈，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵：

用法：

• 對(duì)象

// 在單獨(dú)構(gòu)建的版本中輔助函數(shù)為 Vuex.mapState

import { mapState } from 'vuex'  // 引入

export default {
  // ...
  computed: mapState({
    // 箭頭函數(shù)
    count: state => state.count,

    // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態(tài)localCount错蝴，必須使用常規(guī)函數(shù)
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

如果使用箭頭函數(shù)洲愤，當(dāng)vuex的state和當(dāng)前組件的state，含有相同的變量名稱時(shí)顷锰，this獲取的是vuex中的變量柬赐，而不是局部變量

• 數(shù)組
  當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組馍惹。

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

• 對(duì)象展開運(yùn)算符
  mapState函數(shù)返回的是一個(gè)對(duì)象躺率。如果需要將它與局部計(jì)算屬性混合使用，通常我們需要一個(gè)工具函數(shù)將多個(gè)對(duì)象合并為一個(gè)万矾，以使我們可以將最終對(duì)象傳給computed屬性悼吱。

computed: {
    localComputed () {},
  ...mapState({
      //...
    })
}
也可以使用`...mapState([])`,
但前提是映射的計(jì)算屬性的名稱與state的子節(jié)點(diǎn)名稱相同，如果state在vuex的modules中良狈，則不成功后添。

#mapGetters 輔助函數(shù)

mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想將一個(gè) getter 屬性另取一個(gè)名字，使用對(duì)象形式：

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

#mapMutations 輔助函數(shù)

在組件中提交 Mutation

你可以在組件中使用 this.$store.commit('xxx') 提交 mutation薪丁，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store）遇西。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`

      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }
}

下一步：Action

在 mutation 中混合異步調(diào)用會(huì)導(dǎo)致你的程序很難調(diào)試馅精。例如，當(dāng)你調(diào)用了兩個(gè)包含異步回調(diào)的 mutation 來改變狀態(tài)粱檀，你怎么知道什么時(shí)候回調(diào)和哪個(gè)先回調(diào)呢洲敢？這就是為什么我們要區(qū)分這兩個(gè)概念。在 Vuex 中茄蚯，mutation 都是同步事務(wù)：

store.commit('increment')
// 任何由 "increment" 導(dǎo)致的狀態(tài)變更都應(yīng)該在此刻完成压彭。

為了處理異步操作，讓我們來看一看 Action渗常。

#mapActions輔助函數(shù)

在組件中分發(fā) Action

你在組件中使用 this.$store.dispatch('xxx') 分發(fā) action壮不，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（需要先在根節(jié)點(diǎn)注入 store）：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    })
  }
}

- 5.action異步操作

Action 提交的是 mutation，而不是直接變更狀態(tài)皱碘。
Action 可以包含任意異步操作询一。

先注冊(cè)一個(gè)action

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

Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用context.commit 提交一個(gè) mutation癌椿，或者通過 context.state 和context.getters 來獲取 state 和 getters健蕊。

用參數(shù)結(jié)構(gòu)簡化代碼
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

分發(fā)action

store.dispatch('increment')

mutation 必須同步 ! 執(zhí)行 Action 就不受約束！我們可以在 action 內(nèi)部執(zhí)行異步操作：

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

Actions 支持同樣的載荷方式和對(duì)象方式進(jìn)行分發(fā)：

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

// 以對(duì)象形式分發(fā)
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

例子 調(diào)用異步 API 和分發(fā)多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把當(dāng)前購物車的物品備份起來
    const savedCartItems = [...state.cart.added]
    // 發(fā)出結(jié)賬請(qǐng)求如失，然后樂觀地清空購物車
    commit(types.CHECKOUT_REQUEST)
    // 購物 API 接受一個(gè)成功回調(diào)和一個(gè)失敗回調(diào)
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失敗操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

組合 Action

Action 通常是異步的绊诲，那么如何知道 action 什么時(shí)候結(jié)束呢？更重要的是褪贵，我們?nèi)绾尾拍芙M合多個(gè) action掂之，以處理更加復(fù)雜的異步流程？

首先脆丁，你需要明白 store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise世舰，并且 store.dispatch 仍舊返回 Promise：

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

現(xiàn)在你可以：

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

在另外一個(gè) action 中也可以：

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

最后，如果我們利用 async / await槽卫，我們可以如下組合 action：

// 假設(shè) getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一個(gè) store.dispatch 在不同模塊中可以觸發(fā)多個(gè) action 函數(shù)跟压。在這種情況下，只有當(dāng)所有觸發(fā)函數(shù)完成后歼培，返回的 Promise 才會(huì)執(zhí)行震蒋。

- 6.vuex在vue-cli中的應(yīng)用

精簡版介紹vuex

const store = new Vuex.Store({
    state: {
        name: 'weish',
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit('SET_AGE', 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

這個(gè)就是最基本也是完整的vuex代碼：

vuex 包含有五個(gè)基本的對(duì)象：

1、state：存儲(chǔ)狀態(tài)躲庄，也就是全局變量查剖；

2、getters：派生狀態(tài)噪窘。也就是set笋庄、get中的get，有兩個(gè)可選參數(shù)：state、getters直砂，分別可以獲取state中的變量和其他的getters菌仁。外部調(diào)用方式：store.getters.personInfo()，就和vue的computed差不多静暂；

3济丘、mutations：提交狀態(tài)修改。也就是set洽蛀、get中的set闪盔，這是vuex中唯一修改state的方式，但不支持異步操作辱士。第一個(gè)參數(shù)默認(rèn)是state，外部調(diào)用方式：store.commit('SET_AGE', 18)听绳，和vue中的methods類似颂碘。

4、actions：和mutations類似椅挣，不過actions支持異步操作头岔。第一個(gè)參數(shù)默認(rèn)是和store具有相同參數(shù)屬性的對(duì)象。外部調(diào)用方式：store.dispatch('nameAsyn')鼠证。

5峡竣、modules：store的子模塊，內(nèi)容就相當(dāng)于是store的一個(gè)實(shí)例量九。調(diào)用方式和前面介紹的相似适掰，只是要加上當(dāng)前子模塊名，如：store.a.getters.xxx()荠列。

vuex在vue-cli目錄結(jié)構(gòu)

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我們組裝模塊并導(dǎo)出 store 的地方
    ├── state.js          # 根級(jí)別的 state
    ├── getters.js        # 根級(jí)別的 getter
    ├── mutation-types.js # 根級(jí)別的mutations名稱（官方推薦mutions方法名使用大寫）
    ├── mutations.js      # 根級(jí)別的 mutation
    ├── actions.js        # 根級(jí)別的 action
    └── modules
        ├── m1.js         # 模塊1
        └── m2.js         # 模塊2

state.js示例：

const state = {
    name: 'weish',
    age: 22
};

export default state;

getters.js示例（我們一般使用getters來獲取state的狀態(tài)类浪，而不是直接使用state）：

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

mutation-type.js示例（我們會(huì)將所有mutations的函數(shù)名放在這個(gè)文件里）：

export const SET_NAME = 'SET_NAME';
export const SET_AGE = 'SET_AGE';

mutations.js示例：

import * as types from './mutation-type.js';

export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_AGE](state, age) {
        state.age = age;
    }
};

actions.js示例（異步操作、多個(gè)commit時(shí)）：

import * as types from './mutation-type.js';

export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_AGE, age);
    }
};

modules--m1.js示例（如果不是很復(fù)雜的應(yīng)用肌似，一般來講是不會(huì)分模塊的）：

export default {
    state: {},
    getters: {},
    mutations: {},
    actions: {}
};

index.js示例（組裝vuex）：

import vue from 'vue';
import vuex from 'vuex';
import state from './state.js';
import * as getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import m1 from './modules/m1.js';
import m2 from './modules/m2.js';
import createLogger from 'vuex/dist/logger'; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== 'production'; // 開發(fā)環(huán)境中為true费就，否則為false

export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        m1,
        m2
    },
    plugins: debug ? [createLogger()] : [] // 開發(fā)環(huán)境下顯示vuex的狀態(tài)修改
});

最后將store實(shí)例掛載到main.js里面的vue上去就行了

import store from './store/index.js';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

在vue組件中使用時(shí)，我們通常會(huì)使用mapGetters川队、mapActions力细、mapMutations，然后就可以按照vue調(diào)用methods和computed的方式去調(diào)用這些變量或函數(shù)固额，示例如下：

import {mapGetters, mapMutations, mapActions} from 'vuex';
/* 只寫組件中的script部分 */
export default {
    computed: {
        ...mapGetters([
            name,
            age
        ])
    },
    methods: {
        ...mapMutations({
            setName: 'SET_NAME',
            setAge: 'SET_AGE'
        }),
        ...mapActions([
            nameAsyn
        ])
    }
};