一、Vuex是什麼？
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

什麼情況下我應該使用 Vuex？
Vuex 可以幫助我們管理共享狀態，並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇。

二、使用步驟
1.引入庫
先在腳手架中下載 Vuex
npm install vuex --save
在專案的src目錄下新增一個utils資料夾，裡面建一個store.js
初始化store.js中的內容

import Vue from 'vue'
import Vuex from 'vuex'

//掛載Vuex
Vue.use(Vuex)

//建立VueX物件
const store = new Vuex.Store({
    state:{
        //存放的鍵值對就是所要管理的狀態
        name:'helloVueX'
    }
})

export default store

2.將store掛載到當前專案的Vue例項當中去

開啟main.js

import Vue from 'vue'
import App from './App'
import router from 
 
'./router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一樣，將我們建立的Vuex例項掛載到這個vue例項中
  render: h => h(App)
})

3.在元件中使用Vuex

例如在App.vue中，我們要將state中定義的name拿來在h1標籤中顯示

<template>
    <div id='app'>
        name:
        
 
<h1>{{ $store.state.name }}</h1>
    </div>
</template>

或者要在元件方法中使用

methods:{
    add(){
      console.log(this.$store.state.name)
    }
},

二、VueX中的屬性

state:存放變數
mutations:修改state 中的資料
actions: 只能呼叫mutations中的方法
getters:類似與計算屬性 可以對state中的資料做一些邏輯性操作
modules: 將倉庫分模組儲存

Vuex工作流程

Mutation傳值

在實際生產過程中，會遇到需要在提交某個mutation時需要攜帶一些引數給方法使用。

單個值提交時:

this.$store.commit('edit',15)
1
當需要多參提交時，推薦把他們放在一個物件中來提交:

this.$store.commit('edit',{age:15,sex:'男'})
1
接收掛載的引數：

        edit(state,payload){
            state.name = 'jack'
            console.log(payload) // 15或{age:15,sex:'男'}
        }

Actions
由於直接在mutation方法中進行非同步操作，將會引起資料失效。所以提供了Actions來專門進行非同步操作，最終提交mutation方法。

Actions中的方法有兩個預設引數

context 上下文(相當於箭頭函式中的this)物件
payload 掛載引數
例如，我們在兩秒中後執行2.2.2節中的edit方法

由於setTimeout是非同步操作，所以需要使用actions

actions:{
    aEdit(context,payload){
        setTimeout(()=>{
            context.commit('edit',payload)
        },2000)
    }
}

在元件中呼叫:

this.$store.dispatch('aEdit',{age:15})
1
改進:

由於是非同步操作，所以我們可以為我們的非同步操作封裝為一個Promise物件

    aEdit(context,payload){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                context.commit('edit',payload)
                resolve()
            },2000)
        })
    }

Getters

可以對state中的成員加工後傳遞給外界

Getters中的方法有兩個預設引數

state 當前VueX物件中的狀態物件
getters 當前getters物件，用於將getters下的其他getter拿來用

getters:{
    nameInfo(state){
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
        return getters.nameInfo+'年齡:'+state.age
    }  
}

元件中呼叫

this.$store.getters.fullInfo

Models

當專案龐大，狀態非常多時，可以採用模組化管理模式。Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割。

我們在store裡面建立一個資料夾moudules.

在moudles中，存放不通模組的處理邏輯。舉個例子：

moudules裡面放home.js、list.js、login.js

這三個檔案呢，裡面的結構我們可以這樣寫：

const state = {};
const getters = {};
const mutations = {};
const actions = {};
 
export default {
  // namespaced: true, 這個屬性大家自己百度吧，防止命名衝突
  state,
  actions,
  mutations
};

那index.js就很簡單了：

import Vue from "vue";
import Vuex from "vuex";
import login from "./modules/login";
import list from "./modules/common";
import home from "./modules/common";
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  modules: { login, list, home}
});

這樣維護起來是不是就很方便了呢？

models:{
    a:{
        state:{},
        getters:{},
        ....
    }
}

元件內呼叫模組a的狀態：

this.$store.state.a
1
而提交或者dispatch某個方法和以前一樣,會自動執行所有模組內的對應type的方法：

this.$store.commit('editKey')
this.$store.dispatch('aEditKey')

對映

在需要使用Vuex的元件中匯入

 import {mapState} from 'vuex';

對映關係

mapState > computed

mapGetters > computed

mapMutations > methods

mapActions > methods

methods:{
   //將store.mutations對映到methods
   ...mapMutations()
   //將store.actions對映到methods
   ...mapMutations()
  }
computed:{
   //將store.state中的屬性對映到computed
   ...mapState()
    //將store.getters對映到computed
   ...mapGetters()
  }