Vuex是什么

官網中是這樣描述Vuex的：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
由于官方文檔中的描述太過官方化，本人對vuex的理解就是vuex是對各個組件中的數據進行管理，使組件中數據間的傳遞更加便利化，并且vuex中存在數據不會因為組件對數據進行更改而改變。

ok，我們現在已經明白vuex是什么了，那么vuex應該如何使用呢？

Vuex的模板定義

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {
    
  }
})
export default store

看到這各位看官一定迷糊了，state，actions，mutations，getters，modules又是些什么東西呢？

• state：state 定義了應用狀態的數據結構，同樣可以在這里設置默認的初始狀態。
• actions：Actions 即是定義提交觸發更改信息的描述，常見的例子有從服務端獲取數據，在數據獲取完成后會調用store.commit()來調用更改 Store 中的狀態。可以在組件中使用dispatch來發出 Actions。
• mutations：調用 mutations 是唯一允許更新應用狀態的地方。
• getters：Getters 允許組件從 Store 中獲取數據，譬如我們可以從 Store 中的 projectList 中篩選出已完成的項目列表：
• modules：modules 對象允許將單一的 Store 拆分為多個 Store 的同時保存在單一的狀態樹中。

Vuex的運行流程

vuex.的運行流程

那么在vue中vuex是怎么用的呢,看代碼:
先看沒有引入vuex的代碼

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

引入了vuex的代碼

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@next"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
      inc: state => state.count++,
    dec: state => state.count--
  }
})

const app = new Vue({
  el: '#app',
  computed: {
    count () {
        return store.state.count
    }
  },
  methods: {
    inc () {
      store.commit('inc')
    },
    dec () {
        store.commit('dec')
    }
  }
})
</script>

以上代碼復制之后都是可以在本地運行起來的
我們來看看引入了vuex都有哪些變化:
　　 １．新的代碼添加了對vuex@next腳本的依賴。這是當然的，因為你需要使用vuex的技術，當然需要引用它
　　２．methods數組還是這兩個方法，這和demo1是一樣的；但是方法內的計算邏輯，不再是在函數內進行，而是提交給store對象！這是一個新的對象！
　　３．count數據也不再是一個data函數返回的對象的屬性；而是通過計算字段來返回，并且在計算字段內的代碼也不是自己算的，而是轉發給store對象。再一次store對象！

這些東西全都是網上抄的以下是本人的理解

• state:一般情況下設置為空,用作數據的初始化