2021-3-26 前端達(dá)人
正如Redux一樣，當(dāng)你不知道是否需要Vuex那就是不需要。不要因為想用Vuex而使用它。
用過Vue的人都知道，Vuex是Vue的一個全局狀態(tài)管理模塊，它的作用是多個組件共享狀態(tài)及數(shù)據(jù)，當(dāng)某個組件將全局狀態(tài)修改時，在綁定了該狀態(tài)的另一個組件也將響應(yīng)。實際上可以將Vue理解為一個function，在Vue的作用域中有一個數(shù)據(jù)代理，在每個Vue的實例中都能對其讀和寫
我們都知道Vue的數(shù)據(jù)驅(qū)動原理是用Object.defineProperty()進行數(shù)據(jù)代理，在setter中對數(shù)據(jù)綁定的view進行異步響應(yīng)（vue3.0則是使用proxy）
通過查看Vuex源碼可知Vuex的核心原理就是在Vue的beforeCreate鉤子前混入（mixin）Vuex，并在init中將$store屬性注冊到Vue中
為了使案例更具體，我這還是簡單使用腳手架搭了個項目（可參考另一篇文章），雖然只有兩個組件，但是能清晰的理解其用法，我的src目錄如下，除了最基礎(chǔ)的App.vue和main.js外只有兩個組件和一個store
先說明一下兩個組件的作用，第一個組件是輸入框，在里面輸入字符，在二個組件div中顯示，就是這么簡單
首先我們使用常規(guī)方式(EventBus)實現(xiàn)一下，這里只需要在mainjs中創(chuàng)建一個vue實例，然后注冊在vue中就可以通過事件emit和on來進行組件通信
main.js
import Vue
from 'vue'
import App
from './App'
Vue.prototype.$eventBus = new Vue()
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
<template>
<div>
{{
val
}}
</div>
</template>
<script>
export default {
name: "divComp",
data () {
return {
val: ''
}
},
mounted () {
this.$eventBus.$on('changeVal', (e) => {//監(jiān)聽輸入事件通過eventBus傳遞信息
this.val = e
})
}
}
</script>
<style
scoped>
</style>
如果到這一步，你仍然感覺難度不大，那么恭喜你，Vuex的使用已經(jīng)掌握了一大半了
下面，我們來說說actions，在說actions之前，我們先回顧一下mutations，mutations中注冊了一些事件，在組件中通過emit對事件進行觸發(fā)，達(dá)到處理異步且解耦的效果，然而官方并不推薦我們直接對store進行操作
官方對actions的說明是：Action 類似于 mutation，不同在于1.Action 提交的是 mutation，而不是直接變更狀態(tài)。2.Action 可以包含任意異步操作。
也就是說，我們要把組件中的emit操作放到actions中，而在組件中通過某些方式來觸發(fā)actions中的函數(shù)間接調(diào)用emit，此時，為了讓action更直觀，我們添加一個清除輸入框字符的方法，當(dāng)點擊清除按鈕時清除state.val
在輸入框組件中將value綁定到state上
<template>
<input type="text" @input="inputHandler" :value="this.$store.state.val" />
</template>
<script>
export default {
name: "inputComp",
methods: {
inputHandler(e) {
this.$store.dispatch("actionVal", e.target.value);
},
},
};
</script>
<style
scoped>
</style>
在另一個顯示數(shù)據(jù)的組件中新增刪除按鈕并綁定刪除事件，通過dispatch告知store并通過emit操作state
<template>
<div>
<button @click="clickHandler">清除</button>
<span>{{ this.$store.state.val + this.$store.getters.getValueLength }}</span>
</div>
</template>
<script>
export default {
name: "divComp",
methods: {
clickHandler(){
this.$store.dispatch('actionClearVal')
}
},
};
</script>
<style
scoped>
</style>
最后在store中新建刪除的actions和mutations
import Vue
from "vue";
import Vuex
from "vuex";
Vue.use(Vuex);
const state = {
val: ''
}
const mutations = {
changeVal(state, _val) {
state.val = _val
},
clearVal(state, _val) {
state.val = ''
}
}
const actions = {
actionVal(state, _val) {
state.commit('changeVal', _val)
},
actionClearVal(state) {
state.commit('clearVal')
}
}
const getters = {
getValueLength(state) {
return `長度：${state.val.length}`
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
最終效果如下：
到這里為止，Vuex的基本用法就介紹完畢了。
然而除此之外，Vuex官方還提供了輔助函數(shù)（mapState,mapMutations,mapGetters,mapActions）和Modules（store的子模塊，當(dāng)有許多全局狀態(tài)時，我們?yōu)榱吮苊獯a臃腫，就可以將各個store分割成模塊）方便我們書寫
下面我們用輔助函數(shù)重新實現(xiàn)一下上述功能
輸入框：
<template>
<input type="text" @input="inputHandler" :value="value" />
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
name: "inputComp",
computed: {
...mapState({ value: "val" }),
},
methods: {
...mapMutations({ sendParams: "changeVal" }), // sendParams用來傳遞參數(shù),先把sendParams注冊到mutations上，輸入時觸發(fā)sendParams
inputHandler(e) {
this.sendParams(e.target.value);
},
},
};
</script>
<style
scoped>
</style>
顯示框：
<template>
<div>
<button @click="clickHandler">清除</button>
<span>{{ value + valueLength }}</span>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
name: "divComp",
computed: {
...mapState({ value: "val" }),
...mapGetters({ valueLength: "getValueLength" }),
},
methods: {
...mapActions({ clickHandler: "actionClearVal" }),
},
};
</script>
<style
scoped>
</style>
藍(lán)藍(lán)設(shè)計( www.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.gyxygd.cn