Vuex是什麼
Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。
它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。
Vuex 也內建到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀态快照導入導出等進階調試功能。
什麼是“狀态管理模式”
狀态管理
簡單了解就是統一管理和維護各個vue元件的可變化狀态(你可以了解成 vue 元件裡的某些 data )
這個狀态自管理應用包含以下幾個部分：
- state，驅動應用的資料源
- view，以聲明方式将state映射到視圖
- actions，響應在view上的使用者輸入導緻的狀态變化。
我的了解是 state狀态就是資料源，通常用data，view是視圖層不用說，通常用template，action就是方法進行一些資料操作，通常用methods。
但是，當我們的應用遇到多個元件共享狀态時，單向資料流的簡潔性很容易被破壞：
-
多個視圖依賴于同一狀态。
傳參的方法對于多層嵌套的元件将會非常繁瑣，并且對于兄弟元件間的狀态傳遞無能為力
-
來自不同視圖的行為需要變更同一狀态。
我們經常會采用父子元件直接引用或者通過事件來變更和同步狀态的多份拷貝。以上的這些模式非常脆弱，通常會導緻無法維護的代碼。
是以，我們為什麼不把元件的共享狀态抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的元件樹構成了一個巨大的“視圖”，不管在樹的哪個位置，任何元件都能擷取狀态或者觸發行為！
另外，通過定義和隔離狀态管理中的各種概念并強制遵守一定的規則，我們的代碼将會變得更結構化且易維護。
這就是 Vuex 背後的基本思想，借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設計的狀态管理庫，以利用 Vue.js 的細粒度資料響應機制來進行高效的狀态更新。
什麼情況下我應該使用 Vuex
雖然 Vuex 可以幫助我們管理共享狀态，但也附帶了更多的概念和架構。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣備援的。确實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要建構是一個中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀态，Vuex 将會成為自然而然的選擇。
安裝
npm install vuex --save # npm
yarn add vuex # Yarn
注意：
Vue2.x使用Vue-cli建構項目的時候，是沒有Vuex的選項的，所有需要手動安裝，然後建立sotre.js檔案，模闆仿照列子
Vue3.x使用Vue-cli建構項目的時候，是可以選擇Vuex的，是以會有store.js自動生成
Vuex 依賴 Promise。如果你支援的浏覽器并沒有實作 Promise (比如 IE)，那麼你可以使用一個 polyfill 的庫，例如 es6-promise
npm install es6-promise --save # npm
yarn add es6-promise # Yarn
例子
在一個Vue元件中調用另一個Vue元件中的資料。About調用了Info裡面的資料
About.vue
<template>
<div>
<h1>This is an about page</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
import store from "@/store";
export default {
name: "about",
data() {
return {
//直接将Vuex裡面的state裡面數值拿出來
msg: store.state.count
}
}
}
</script>
<style scoped>
</style>
Info.vue
<template>
<div>
hello info components
<button @click="add">添加</button>
</div>
</template>
<script>
import store from "@/store";
export default {
name: "Info",
//這裡如果不注入，就會報錯
store,
methods: {
add() {
console.log('add Event from info!')
//調用store裡面方法集中的一個具體方法
store.commit('increase')
}
}
}
</script>
<style scoped>
</style>
sotre.js
import Vue from 'Vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//Vue狀态
state: {
count: 0
},
//改變狀态的方法集
mutations: {
increase() {
this.state.count++
}
},
actions: {}
})