小編給大家分享一下vuex狀態(tài)管理模式的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一、前言
本次接受一個BI系統(tǒng)，要求是能夠接入數(shù)據(jù)源-得到數(shù)據(jù)集-對數(shù)據(jù)集進行處理-展現(xiàn)為數(shù)據(jù)的可視化，這一個系統(tǒng)為了接入公司自身的產(chǎn)品，后端技術采用spring boot，前端采用vue+vuex+axios的項目架構方式，vuex作為vue的狀態(tài)管理，是尤為重要的部分。
二、vuex簡單使用
安裝vuex
cnpm install vuex --save
在src目錄下建立文件夾，命名為store，建立index.js
如圖所示：
在index.js中引入vue和vuex狀態(tài)管理，并導出vuex，代碼如下：
重慶分公司
重慶分公司
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
token: 0
},
})
export default store;在main.js中引入剛剛創(chuàng)建好的store并作為vue的store
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
,
store
}).$mount('#app')獲得store里的token
在vue的組件中，想要獲得vuex里的全局數(shù)據(jù)，可以把vue看做一個類，在其下面有許多屬性，其中有我們剛剛注入的vuex，如圖
我們可以看到vue他本身就是一個json，在其下有$store這個對象，而$store下又有state，state下得就是我們存儲在vue中的全局數(shù)據(jù)，在組件中通過this.$store.state.token即可獲得我們的數(shù)據(jù)。
三、vuex的核心概念之getters
有時候我們需要在獲得的數(shù)據(jù)做一些簡單的過濾或者處理的時候，getters就起到作用了。
代碼如下
getters:{
getToken(state){
return state.token;
}同直接獲取token的方式一樣。getters也已經(jīng)掛載到了$store下，故，我們可以通過this.$store.state.getters.getToken的方式，調(diào)用其函數(shù)。 但vuex為我們提供了mapGetters能夠?qū)⑵溆成涞綄膅etters的方法上去，用法如下所示
import {mapGetters,mapActions} from 'vuex'
export default {
name: 'app',
components: {
HelloWorld
},
computed:{
...mapGetters(["getToken"])
},
mounted() {
console.log(this.getToken)
console.log(this.$store.getters.getToken)
},
}映射出來的getters仍然掛載在vue上，如圖所示
四、vuex的核心概念之mutations與actions
我們可以吧mutations理解成一個事件函數(shù)，而actions就是觸發(fā)器，通過actions，發(fā)起動作。
簡單實例代碼如下。
mutations:{
setToken(state,n){
state.token=state.token+n;
}
},
actions:{
setToken({commit},n){
commit('setToken',n)
}
}在組件中的使用，同getters的用法，代碼如下
import {mapGetters,mapActions} from 'vuex'
export default {
name: 'app',
components: {
HelloWorld
},
computed:{
...mapGetters(["getToken"])
},
mounted() {
console.log(this)
console.log(this.setToken(1))
console.log(this.getToken)
},methods:{
...mapActions(["setToken"])
},在vue的json中，同樣可以找到相同的屬性。
五、vuex核心概念之mudules
vuex允許我們將store分為不同的模塊，每個單獨的模塊具備getters，state，mutations，actions這四個store核心，
需要注意的是如果在模塊內(nèi)部加入了namesapced：true這一個屬性。在取值的時候需要做一點細微的變動，通過mapGetters火mapActions映射時需要將模塊名作為路勁，來獲得該模塊的getters，和actions，模塊化代碼如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
namespaced:true,
state: { a:1 },
mutations: { },
actions: { },
getters: { geta(state){
return state.a;
} }
}
const moduleB = {
namespaced:true,
state: { b:1},
mutations: { },
actions: {}
}
const store = new Vuex.Store({
state: {
token: 0
},
getters:{
getToken(state){
return state.token;
},
} , mutations:{
setToken(state,n){
state.token=state.token+n;
}
},
actions:{
setToken({commit},n){
commit('setToken',n)
}
},
modules: {
a: moduleA,
b: moduleB
},
})
export default store;在組件中獲得模塊A的值得時候，我們來看一下geta這個getters屬性，在vue中的狀態(tài)，如圖所示
geta為模塊a下得getters屬性，在獲取的時候就需要這樣
computed:{
// ...mapGetters(["getToken"])
...mapGetters("a",["geta"])
},
mounted() {
console.log(this)
console.log(this.geta)而如果模塊沒有命令空間的話，vuex會自動將模塊內(nèi)的getters，actions注入為全局的，直接按照原來個獲取方式就可以了。
以上是“vuex狀態(tài)管理模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
