2019-11-04
五分鐘搞懂Vuex
這段時(shí)間一直在用vue寫項(xiàng)目邪财，vuex在項(xiàng)目中也會依葫蘆畫瓢使用席楚，但是總有一種朦朦朧朧的感覺凭需。于是決定徹底搞懂它染乌。
看了一下午的官方文檔瘫辩，以及資料伏嗜，才發(fā)現(xiàn)vuex so easy坛悉！
作為一個(gè)圈子中的人，決定輸出一下文檔承绸，如果你仔細(xì)看完這篇文章裸影，保證你對vuex熟練掌握。
我把自己的代碼上傳到了github军熏，大家有需要的可以拉下來：github
先說一下vuex到底是什么轩猩？
vuex 是一個(gè)專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。
這個(gè)狀態(tài)我們可以理解為在data中的屬性荡澎，需要共享給其他組件使用的部分均践。
也就是說，是我們需要共享的data摩幔，使用vuex進(jìn)行統(tǒng)一集中式的管理彤委。
vuex中，有默認(rèn)的五種基本的對象：
- state：存儲狀態(tài)（變量）
- getters：對數(shù)據(jù)獲取之前的再次編譯或衡，可以理解為state的計(jì)算屬性焦影。我們在組件中使用 $sotre.getters.fun()
- mutations：修改狀態(tài)，并且是同步的封断。在組件中使用$store.commit('',params)斯辰。這個(gè)和我們組件中的自定義事件類似。
- actions：異步操作坡疼。在組件中使用是$store.dispath('')
- modules：store的子模塊彬呻，為了開發(fā)大型項(xiàng)目，方便狀態(tài)管理而使用的柄瑰。這里我們就不解釋了废岂，用起來和上面的一樣。
下面我們正式開始狱意，一步步使用vuex
1湖苞、首先創(chuàng)建一個(gè)vue-cli項(xiàng)目
執(zhí)行下面的命令，創(chuàng)建一個(gè)app項(xiàng)目（這里也可以使用其他非webpack模板详囤，以及非app名稱）
vue init webpack app
2财骨、創(chuàng)建完成之后，我們進(jìn)入文件夾下藏姐，并且運(yùn)行項(xiàng)目
cd app/
npm run dev
接下來我們在src目錄下創(chuàng)建一個(gè)vuex文件夾
并在vuex文件夾下創(chuàng)建一個(gè)store.js文件
文件夾目錄長得是這個(gè)樣子
3隆箩、目前我們還沒有引入vuex，我們需要先下載vuex羔杨，并且引入它
在保證我們處于我們項(xiàng)目下捌臊，在命令行輸入下面命令，安裝vuex
npm install vuex --save
4兜材、安裝成功之后理澎，我們就可以在store.js中盡情玩耍我們的vuex了逞力！
在store.js文件中，引入vuex并且使用vuex糠爬，這里注意我的變量名是大寫Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 0 }
export default new Vuex.Store({
state
})
接下來寇荧，在main.js中引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
然我我們在任意一個(gè)組件中就可以使用我們定義的count屬性了。
這里我們在helloWorld中使用一下执隧，去除helloworld.vue中不用的標(biāo)簽
<template>
<div class="hello">
<h3>{{$store.state.count}}</h3>
</div>
</template>
打開我們剛才運(yùn)行項(xiàng)目的瀏覽器揩抡，可以看到已經(jīng)使用成功了！
并且在vue開發(fā)工具中我們可以看到我們定義的變量count
到這一步镀琉，已經(jīng)成功了一小半峦嗤！vuex很簡單吧？
回想一下屋摔，我們只需要在下載安裝使用vuex寻仗，在我們定義的store.js中定義state對象，并且暴露出去凡壤。
在main.js中使用我們的store.js（這里是為了防止在各個(gè)組件中引用，因?yàn)閙ain.js中耙替，有我們的new Vue 實(shí)例把窍馈！）
現(xiàn)在我們已經(jīng)使用了vuex中的state俗扇，接下來我們?nèi)绾尾僮鬟@個(gè)值呢硝烂？ 沒錯(cuò)！用mutations和actions
我們繼續(xù)操作store.js文件
我們在sotre.js中定義mutations對象铜幽，該對象中有兩個(gè)方法滞谢，mutations里面的參數(shù)，第一個(gè)默認(rèn)為state除抛，接下來的為自定義參數(shù)狮杨。
我們在mutations中定義兩個(gè)方法，增加和減少到忽，并且設(shè)置一個(gè)參數(shù)n橄教，默認(rèn)值為0，然后在Vuex.Store中使用它
/**
* mutations 里面放置的是我們操作state對象屬性的方法
*/
const mutations = {
mutationsAddCount(state, n = 0) {
return (state.count += n)
},
mutationsReduceCount(state, n = 0) {
return (state.count -= n)
}
}
export default new Vuex.Store({
state,
mutations
})
然后我們在helloWorld.vue中喘漏，使用這個(gè)方法
還記得我們?nèi)绾卧诮M件中使用mutations嗎护蝶？就和自定義事件非常相似
<template>
<div class="hello">
<h3>{{$store.state.count}}</h3>
<div>
<button @click="handleAddClick(10)">增加</button>
<button @click="handleReduceClick(10)">減少</button>
</div>
</div>
</template>
methods: {
handleAddClick(n){
this.$store.commit('mutationsAddCount',n);
},
handleReduceClick(n){
this.$store.commit('mutationsReduceCount',n);
}
}
來瀏覽器看一下效果如何！
我們可以看到每當(dāng)觸發(fā)事件時(shí)翩迈，我們都可以在vue開發(fā)工具中看到我們觸發(fā)的mutations方法持灰，以及參數(shù)
完美！
接下來就是actions负饲，actions是異步操作
創(chuàng)建actions對象堤魁，并且使用
這里我在兩個(gè)方法中使用了兩個(gè)不同的參數(shù)喂链，一個(gè)是context，它是一個(gè)和store對象具有相同對象屬性的參數(shù)姨涡。在第二個(gè)函數(shù)中衩藤，我是直接使用了這個(gè)對象的commit的方法。
憑大家喜好就行
const actions = {
actionsAddCount(context, n = 0) {
console.log(context)
return context.commit('mutationsAddCount', n)
},
actionsReduceCount({ commit }, n = 0) {
return commit('mutationsReduceCount', n)
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
在helloWorld.vue中
在methods中涛漂，增加兩個(gè)方法赏表，使用dispath來觸發(fā)
<div>異步操作</div>
<div>
<button @click="handleActionsAdd(10)">異步增加</button>
<button @click="handleActionsReduce(10)">異步減少</button>
</div>>
handleActionsAdd(n){
this.$store.dispatch('actionsAddCount',n)
},
handleActionsReduce(n){
this.$store.dispatch('actionsReduceCount',n)
}
進(jìn)入瀏覽器看下效果如何！
最后就是getters
我們一般使用getters來獲取我們的state匈仗，因?yàn)樗闶莝tate的一個(gè)計(jì)算屬性
const getters = {
getterCount(state, n = 0) {
return (state.count += n)
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
<h4>{{count}}</h4>
const getters = {
getterCount(state) {
return (state.count += 10)
}
}
getters算是非常簡單的了瓢剿。
到這里，如果全都看懂了悠轩，vuex你已經(jīng)沒有壓力了间狂。
但是vuex官方給了我們一個(gè)更簡單的方式來使用vuex， 也就是 {mapState, mapMutations, mapActions, mapGetters}
只要我們把上面基礎(chǔ)的搞懂火架，這些都不在話下鉴象，只是方面我們書寫罷了。
就這么簡單何鸡，這里我們用到了es6的擴(kuò)展運(yùn)算符纺弊。如果不熟悉的同學(xué)還是去看看阮一峰大神的《Es6標(biāo)準(zhǔn)入門》這本書，我是看完了骡男，受益匪淺淆游！
<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
...mapMutations({
handleAddClick: 'mutationsAddCount',
handleReduceClick: 'mutationsReduceCount'
}),
...mapActions({
handleActionsAdd: 'actionsAddCount',
handleActionsReduce: 'actionsReduceCount'
})
// handleAddClick(n){
// this.$store.commit('mutationsAddCount',n);
// },
// handleReduceClick(n){
// this.$store.commit('mutationsReduceCount',n);
// },
// handleActionsAdd(n){
// this.$store.dispatch('actionsAddCount',n)
// },
// handleActionsReduce(n){
// this.$store.dispatch('actionsReduceCount',n)
// }
},
computed: {
count(){
return this.$store.getters.getterCount
}
}
}
</script>
同理，getters和 state也可以使用 mapState隔盛，mapGetters
如果你更懶的話犹菱，我們可以使用數(shù)組，而非對象吮炕，或者es6里面的對象簡寫方式
就像這種
最后腊脱，如果大家發(fā)現(xiàn)有什么問題，或者錯(cuò)誤的地方龙亲，歡迎留言交流虑椎。
如果你的才華還實(shí)現(xiàn)不了你的野心，那就靜下心來俱笛，埋頭苦干捆姜。有志者事竟成破釜成舟百二秦關(guān)終屬楚，苦心人天不負(fù)臥薪嘗膽三千越甲可吞吳迎膜！
分類: Vue
[好文要頂](javascript:void(0);)
