第十三章：vuex狀態(tài)管理
什么是狀態(tài)管理？
我相信你跟我一樣，看見狀態(tài)管理這幾個字的時候是一個懵逼的狀態(tài)。
vue內(nèi)置只處理父子嵌套關(guān)系，兄弟組件傳值，需要先傳給父級，父級再傳給兄弟元素。效率是非常低的。
現(xiàn)在有了vuex，問題就全部解決了，vuex相當(dāng)于一個全局?jǐn)?shù)據(jù)統(tǒng)籌和管理的中間件，所有數(shù)據(jù)全部給vuex，通過調(diào)用方法，再從vuex中讀取和操作數(shù)據(jù)。省去了一層層傳遞的問題。
開始安裝
1.http引入方式安裝
你可以直接在頁面中引入
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
這里注意一定不要忘了在加載后，使用use方法讓vue裝載vuex。
Vue.use(Vuex);
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet">
</head>
<body>
<div id="app">
<div>{{this.$store.state.myName}}</div>
<div>{{message}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script>
//創(chuàng)建store控制器
var store = {
debug: true,
state: {
myName: 'Hello!dangyunlong'
},
getname(newName){
this.state.myName = newName
}
}
//vue加載vuex
Vue.use(Vuex);
new Vue({
el:"#app",
store:store,
data:{
message:3
},
methods: {
},
mounted: function() {
console.log(this.$store.state.myName);
}
})
</script>
</body>
</html>
2.npm安裝方式：
注意：如果你對npm包管理不熟悉，建議你跳過這一章，先閱讀后面關(guān)于vuecli的使用方法的章節(jié)！
cnpm i vuex --save
安裝完畢在你的package.json中應(yīng)該能看到vuex的版本。
在這里我們主要講解在vuecli中的使用方法：
因為vuex是基于一個store的，你可以理解它是一個vuex的配置文件。所以我們需要在你項目的src目錄新建一個store文件夾，然后在里面新建一個index.js文件。
index.js中這樣寫：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
name:"dangyunlong",
age:"30"
},
mutations:{
gaiming(state,name){
state.name = name
}
}
});
這里state是你要全局共享的屬性，mutations是你操作state中屬性值的方法。所有的操作理論上都應(yīng)該通過mutations去操作。
然后老方法，打開main.js！
添加這兩個，你肯定會疑惑這個store是什么，不用著急我們后面會解釋。
你可以理解這個store其實(shí)是一個vuex全局配置文件。
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import App from './App'
import router from './router'
import store from './store'
Vue.use(ElementUI);
//加載axios
Vue.prototype.axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App),
router,
store,
components: { App },
template: '<App/>'
})
ps：
如果你的配置文件寫成了這樣，恭喜你已經(jīng)完成了vue+vuex+axios+vueroute+elementUI+webpack 的終極組合。
好了，接下來我們就該玩一玩了
首先找個頁面打印一下this，你就會發(fā)現(xiàn)，再this中已經(jīng)能找到store的內(nèi)容和方法了。
是不是屌炸天？？
然后你使用
this.$store.state.name
直接就能打印出來內(nèi)容了。就這么簡單。。
這里要注意一點(diǎn)，你如果需要修改值，你只能通過我們在mutations中定義的方法去修改。
這可能跟vuex本身的機(jī)制有關(guān)系，它本來也不屬于你這個頁面，你當(dāng)然不能通過this.xx = xx去修改它的內(nèi)容
必須vuex自帶的commit方法
this.$store.commit("gaiming","hupengcheng")
原理解析
通常我們在組件和父級之間傳遞數(shù)據(jù)是這樣寫的
this.$emit("updateDate");
然后 上一級中 再往上一級反饋即可
注意 這就是子調(diào)父 無需props
@updateDate="updateDate"
methods: {
updateDate(e) {
this.$emit("updateDate");
}
},
參數(shù)說明：
vuex 完全依賴于一個Store相當(dāng)于給每一個控制器增加了一個狀態(tài)池。
vuex主要的作用再于解決多個組件之間復(fù)雜的嵌套關(guān)系，此刻，傳值變得非常困難，你還得一層一層往外傳，很難受。
vuex相當(dāng)于一個代理工具，也叫狀態(tài)管理工具，你先從A組件中把值傳給vuex，在從b組件中調(diào)用vuex中存的值即可。
new Vuex.store({
state：數(shù)據(jù)狀態(tài)，類似于data
mutations：改變狀態(tài)方法
getters：過濾數(shù)據(jù)
action：同步執(zhí)行
module：分割為多個模塊
})
