接上篇《24.Vue UI架構 ElementUi 按需引入》
上一篇我們講解了如何按需引入ElementUI，至此vue系列已經基本介紹完畢，本篇我們來介紹vue的更新版vuex。
本系列博文使用的Vue版本：2.6.11
vuex官方網站：https://vuex.vuejs.org/zh/
一、Vuex 是什麼？
下面是Vuex官方網站上對Vuex的介紹：
Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。Vuex 也內建到 Vue 的官方調試工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 調試、狀态快照導入導出等進階調試功能。
這裡簡單總結一下，其實Vuex就是用來管vue的，管它的什麼呢？就是管它的元件狀态和一緻性，這裡很多童鞋可能還不是太明白，我們來通過例子說明一下：
如上圖（圖檔出自頁底視訊教程）的元件關系，其中的“首頁”和“新聞”頁面，它們既不是父子元件，也不是兄弟元件，因為它們既沒有上下級關系，也沒有相同的頂級父元件，那麼這兩個元件之間如何傳值？如何保持狀态的一緻性呢？
通過之前的學習我們知道，父子元件之間的傳值，可以通過“this.$parent”、“this.$refs”擷取父子的值或屬性，兄弟元件之間可以通過“根元件廣播資料”來進行值或方法的傳遞，像非父子和兄弟的元件，雖然可以通過路由進行傳值，但是傳遞的東西是有限的（get請求有限制），此時就需要通過vuex的管理來實作了。
一句話，vuex主要解決的就是不同元件之間的資料共享、資料持久化的問題。
（小聲說一句，其實vuex能實作的，通過之前學習的Localstrage和SessionStorage都可以實作。一般小項目中使用這兩個小兄弟就行了，大型項目便于管理，可以使用vuex。）
二、Vuex的使用
Vuex有“State”、“Getters”、“Mutations”、“Actions”、“Modules”幾種核心概念，下面一一講述一下。
（簡單一句話描述：State是元件的狀态，Getter是State的計算屬性，Mutation是方法，可以改變State的資料，Action用來觸發Mutation去改變State的資料，Module用來将不同狀态分割成子產品。）
這裡的較長的描述大家去看官方文檔即可，這裡我們通過一個執行個體來了解Vuex的使用。
1、安裝vuex
在項目所在的檔案夾目錄下，執行安裝指令：
npm install vuex --save
2、建立Vuex檔案夾和store.js
在項目的src目錄下，建立一個名為“vuex”的檔案夾，便于單獨管理vuex的相關内容，然後在該檔案夾下建立一個store.js檔案：
3、在store.js引入vuex，設定關鍵屬性
store.js我們可以了解為倉庫，用來存放核心元件和常用元件的。
我們在store.js檔案中來分别引入vue和vuex，并設定關鍵屬性：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/**1.state在vuex中主要用于存儲資料 */
var state={
count:1
}
/**2.mutations裡面放的是方法，主要用于改變state裡面的資料 */
var mutations={
incCount(){
++state.count;
}
}
//3.定義store
const store = new Vuex.Store({
state,
mutations:mutations
})
//4.暴露store
export default store;
上面我們設定了存儲資料的state，改變state資料的mutations，然後定義和暴露包含這兩個屬性的store對象。這裡我們在state放了一個“count”值，預設為1，然後在mutations定義了一個名為“incCount”的方法，隻要調用這個方法，“count”值就會自增一次。
（注：這裡暫時僅使用了state和mutations，當然還有一些其他屬性）
下面我們來使用vuex，在不同元件中擷取和改變store中state的參數的值。
4、在元件中使用store
（1）一個元件引入Count計數值
我們在之前的Helloworld.vue首頁中引入store（之前的代碼都先删除了），然後在data區域直接聲明store，然後就在template區域直接引用store中的資料，同時也可以在方法中調用store中的“incCount”方法：
<template>
<!-- 所有的内容要被根節點包含起來 -->
<div class="hello">
<h1>{{ msg }}</h1>
State中的值【Count】：{{this.$store.state.count}}
<br/>
<button @click="incCount()">增加數量</button>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: '首頁父元件'
}
},
store,//這裡如果store是其他名字，要寫成store: store1
methods:{
incCount(){
//改變vuex store裡面的資料
this.$store.commit('incCount');//觸發mutations定義的方法
}
}
}
</script>
<!-- 添加 "scoped" 屬性來限制裡面css樣式隻能被該元件引用 -->
<style scoped>
h1{ color:red;}
</style>
這裡相當于編寫了一個顯示并控制共享參數的一個元件，效果：
當點選增加數量的時候，count的值就會增加。
（2）另一個元件引入Count計數值
然後我們在使用者頁面User.js也引入這個Count計數值：
<template>
<div id="user">
<div class="user-info"><div class="left">
<ul>
<li><router-link to="/user/userList">使用者清單</router-link></li>
<li><router-link to="/user/userAdd">新增使用者</router-link></li>
</ul>
State中的值【Count】：{{this.$store.state.count}}<br/>
<button @click="incCount()">增加數量</button></div>
<div class="right"><router-view></router-view></div>
</div>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'user',
data () {
return { msg: '使用者中心' }
},
store,
methods:{
incCount(){
//改變vuex store裡面的資料
this.$store.commit('incCount');//觸發mutations定義的方法
}
}
}
</script>
<style scoped>
.user-info{ display: flex; }
.user-info li{ line-height: 20px; }
.left{ width: 200px; min-height: 400px; border-right: 1px solid #eee; }
.right{ flex: 1; }
</style>
效果：
可以看到，兩個不同元件之間通過Store實作了資料共享、方法共享。
下一篇我們繼續介紹vuex的“Getters”、“Actions”等關鍵屬性。
參考：
《IT營：itying.com-2018年Vue2.x 5小時入門視訊教程》
轉載請注明出處：https://blog.csdn.net/acmman/article/details/113462230