vuex 是一個專為 vue.js 應用程序開發(fā)的狀態(tài)管理模式，在構建一個中大型單頁應用中使用vuex可以幫助我們更好地在組件外部管理狀態(tài)，我們知道組件之間是獨立的，組件之間想要實現(xiàn)通信需要使用props或者bus，可以實現(xiàn)父子組件及兄弟組件之間的數(shù)據(jù)傳送，如果一個項目中要使用很多組件之間的數(shù)據(jù)交換，我們再使用props就會變得雜亂不堪，還有一大堆的邏輯代碼，不利于代碼的維護。那么有沒有更方便、更簡潔的方法呢？我們能否把這些組件之間共享的數(shù)據(jù)給“拎”出來，能否在一定的規(guī)則下管理這些數(shù)據(jù)呢？有的，由于狀態(tài)零散地分布在許多組件和組件之間的交互中，大型應用復雜度也經(jīng)常逐漸增長。為了解決這個問題，Vue 提供 vuex

什么是vuex?

官方解釋：

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

按我的理解，vuex是一個單例，類似于線程池、全局緩存、瀏覽器中的window對象等，他將所有組件的數(shù)據(jù)都拿出來放在一個叫store‘倉庫’中，在需要用的時候，調(diào)用特有的方法進行存值和取值，vuex提供了五個屬性：store，mutations，actions，getters，modules

在vue-cli中創(chuàng)建vuex

當我們使用vue-cli搭建項目時，使用npm install --save-dev vuex 把vuex添加到依賴,那么我們怎么使用vuex呢

通過store選項

vue-cli搭建成功，在src目錄下會有一個main.js文件，main.js的主要作用是把項目中最頂層的app.vue組件掛載到DOM中，其他所有的組件都可以看做是app.vue的子組件。
在main.js中添加store

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

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

Vue.config.productionTip = false
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

src文件下新建一個Store文件夾，創(chuàng)建index.js文件

此例中我把五個屬性寫到了同一個文件中，如果項目中需要配置的vuex選項很多，可以把vuex的相關代碼分割到不同模塊中

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
const state = {
    
}
const mutations = {
    
}
const actions = {

}
const getters = {

}
const modules = {

}

export default new vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules
})

將vuex實例掛載到vue原型鏈上

上述例子中我們引入axios時，不能用use方法，只能使用vue的原型鏈，因此，當我們要引用vuex模塊時，原理同axios，需要在vue原型上引入。

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import vuex from 'vuex'
import store from './Store/index.js'

Vue.config.productionTip = false
Vue.prototype.$http = axios
Vue.use(vuex);
Vue.prototype.$store = new vuex.Store({
    state: {},
    getters: {},
    actions: {},
    mutations: {}
});
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})