前篇：vuex 是什麼？有什麼用？
vuex 是什麼？
Vuex 可以幫助我們管理共享狀態，並附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了
什麼時候用vuex?
老生常談的話題，每個人的使用動機不同可能結果就不同，站在系統架構的角度上來，vuex雖然能很好幫助我們管理狀態, 但隨之也帶來更多的概念讓我們花時間來消化，一般情況下我們會根據項目的實際大小來決定是否需要引入vuex
隨着 JavaScript 單頁應用開發日趨複雜，JavaScript 需要管理比任何時候都要多的 state （狀態）。 這些 state 可能包括服務器響應、緩存數據、本地生成尚未持久化到服務器的數據，也包括 UI 狀態，如激活的路由，被選中的標籤，是否顯示加載動效或者分頁器等等。
在應用中，組件之間的通信其實是歸根於應用的狀態管理；而應用的狀態是來自多方面的，如何對狀態進行管理，提高代碼的可維護性，提升開發效率。Vue 的核心庫只關注視圖層，單文件組件，其模板、邏輯和樣式是內部耦合的，側重數據和視圖的同步；Vue 本身並沒有對數據狀態的管理進行處理，但其提供了另外一個解決方案 Vuex，一個集中式狀態管理的庫；也就是說，你可能不需要 Vuex，它只是對你應用狀態進行管理的一個庫。
一、安裝vuex 創建
當前項目下使用命令
npm install vuex --save #安裝vuex
二、配置 vuex （main.js）
1、引入
import Vuex from 'vuex';
2、安裝插件
Vue.use(Vuex);
3、 定義狀態數據num，及getters方法讀取num
定義狀態數據 num
var store = new Vuex.Store({
state: {
num: 1
}
})
// 定義了 getters 方法獲取 num 數據的 store （讀取數據）
var store = new Vuex.Store({
state: {
num: 1
},
getters: {
getNum: function (state) {
return state.num;
}
}
})
// 定義了 getters （查詢）+ mutations （修改）
// Vuex 配置
var store = new Vuex.Store({
state: {
num: 1
},
getters: {
getNum: function (state) {
return state.num;
}
},
mutations:{
// 參數一爲當前state,參數二爲傳遞值
updNum: function(state,payload){
state.num += payload;
}
}
})
4、vue實例添加 store,
new Vue({
store, //實例添加vuex
router,
render: h => h(App),
}).$mount('#app')
如下：
三、vuex 讀取狀態數據的三種方式
1、 讀取一（直接讀取變量值）
{{$store.state.num}}
2、 讀取二（getters方式讀取變量值）
store 添加getters
getters: {
getNum: function (state) {
return state.num;
}
},
讀取
{{$store.getters.getNum}}
3、 讀取三（定義簡寫, 讀取變量值）
KaTeX parse error: Expected '}', got 'EOF' at end of input: …太長，每次定義不友好，在 {{store.getters.getNum}} 的方法上配置簡寫
store 添加getters
getters: {
getNum: function (state) {
return state.num;
}
},
添加配置簡寫
<script type="text/javascript">
import {mapGetters} from 'vuex';
export default {
computed:{
...mapGetters({
getNum:'getNum'
})
}
}
</script>
直接使用簡寫讀取
{{getNum}}
4、配置vuex的完整代碼（main.js）
// 核心組件
import Vue from 'vue'
import Vuex from 'vuex';
import axios from 'axios';
import VueRouter from 'vue-router';
// 當前項目組件
import App from './App.vue'
import HelloWorld from './components/HelloWorld';
// 關閉生產模式下給出的提示
Vue.config.productionTip = false;
// 安裝插件
Vue.use(Vuex);
Vue.use(axios);
Vue.use(VueRouter);
// Vuex 配置
var store = new Vuex.Store({
state: {
num: 1
},
getters: {
getNum: function (state) {
return state.num;
}
}
})
// axios 配置
var instance = axios.create({
baseURL: 'http://localhost:8088',
});
Vue.prototype.$axios = instance;
// 路由配置
let router = new VueRouter({
routes: [{
path: '/',
component: HelloWorld
}, ]
})
/**
* 路由攔截
* to: Route: 即將要進入的目標 路由對象, from: Route: 當前導航正要離開的路由
*/
router.beforeEach((to, from, next) => {
window.console.log(to);
next(); //url放行
})
//定義實例
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
5、3種方式的讀取完整代碼
<template>
<div>
store1 = {{$store.state.num}} <br />
store2 = {{$store.getters.getNum}} <br />
store3 = {{getNum}}
</div>
</template>
<script type="text/javascript">
import {mapGetters} from 'vuex';
export default {
computed: {
...mapGetters({
getNum: 'getNum'
})
}
}
</script>
<style>
</style>
效果
四、使用 vuex 修改狀態數據（mutations）
1、添加 mutations
store 添加mutations 的mutations 方法
mutations:{
// 參數一爲當前state,參數二爲傳遞值
updNum: function(state,payload){
state.num += payload;
}
}
2、添加點擊事件
<button @click="updNum"> num+10</button>
3、點擊事件修改狀態值
this.$store.commit
參數1 ： mutations 內的函數名
參數2 ： 傳遞的參數，可以爲對象數據 {}
methods: {
updNum() {
//參數updNum = mutations 內的函數名
this.$store.commit('updNum',10);
}
},
五、Action（處理異步請求）
Action 類似於 mutations，唯一的區別就是Action 是處理異步數據的
Action 需要調用mutations 執行同步操作
在Action 中調用 mutations 完成數據修改
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
使用store.dispatch 觸發函數
store.dispatch('increment')
六、Module
Module = State+Getter +Mutation+Action
把 State+Getter +Mutation+Action 抽取出來定義，也可以單獨定義爲一個json 文件引入使用
