Vuex是什么
官網(wǎng)中是這樣描述Vuex的：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式抡草。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)自脯，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension允悦，提供了諸如零配置的 time-travel 調(diào)試很魂、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能趴樱。
由于官方文檔中的描述太過官方化，本人對vuex的理解就是vuex是對各個(gè)組件中的數(shù)據(jù)進(jìn)行管理尚卫，使組件中數(shù)據(jù)間的傳遞更加便利化归榕，并且vuex中存在數(shù)據(jù)不會(huì)因?yàn)榻M件對數(shù)據(jù)進(jìn)行更改而改變。
ok吱涉，我們現(xiàn)在已經(jīng)明白vuex是什么了刹泄，那么vuex應(yīng)該如何使用呢？
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 定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)，同樣可以在這里設(shè)置默認(rèn)的初始狀態(tài)乞旦。
- actions：Actions 即是定義提交觸發(fā)更改信息的描述贼穆，常見的例子有從服務(wù)端獲取數(shù)據(jù)，在數(shù)據(jù)獲取完成后會(huì)調(diào)用store.commit()來調(diào)用更改 Store 中的狀態(tài)兰粉」嗜可以在組件中使用dispatch來發(fā)出 Actions。
- mutations：調(diào)用 mutations 是唯一允許更新應(yīng)用狀態(tài)的地方玖姑。
- getters：Getters 允許組件從 Store 中獲取數(shù)據(jù)愕秫，譬如我們可以從 Store 中的 projectList 中篩選出已完成的項(xiàng)目列表：
- modules：modules 對象允許將單一的 Store 拆分為多個(gè) Store 的同時(shí)保存在單一的狀態(tài)樹中。
Vuex的運(yùn)行流程
那么在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>
以上代碼復(fù)制之后都是可以在本地運(yùn)行起來的
我們來看看引入了vuex都有哪些變化:
１．新的代碼添加了對vuex@next腳本的依賴焰络。這是當(dāng)然的戴甩，因?yàn)槟阈枰褂胿uex的技術(shù)，當(dāng)然需要引用它
∩帘恕２．methods數(shù)組還是這兩個(gè)方法甜孤，這和demo1是一樣的；但是方法內(nèi)的計(jì)算邏輯畏腕，不再是在函數(shù)內(nèi)進(jìn)行缴川，而是提交給store對象！這是一個(gè)新的對象描馅！
“芽洹３．count數(shù)據(jù)也不再是一個(gè)data函數(shù)返回的對象的屬性；而是通過計(jì)算字段來返回铭污，并且在計(jì)算字段內(nèi)的代碼也不是自己算的恋日，而是轉(zhuǎn)發(fā)給store對象。再一次store對象况凉！
這些東西全都是網(wǎng)上抄的以下是本人的理解
- state:一般情況下設(shè)置為空,用作數(shù)據(jù)的初始化
