這篇文章主要介紹了詳解vuex狀態管理模式，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、前言
本次接受一個BI系統，要求是能夠接入數據源-得到數據集-對數據集進行處理-展現爲數據的可視化，這一個系統爲了接入公司自身的產品，後端技術採用spring boot，前端採用vue+vuex+axios的項目架構方式，vuex作爲vue的狀態管理，是尤爲重要的部分。這裏，我將vuex如何運作和使用做一次總結，有錯的地方，望多多提點。
二、vuex簡單使用
安裝vuex
cnpm install vuex --save
在src目錄下建立文件夾，命名爲store，建立index.js
如圖所示：
在index.js中引入vue和vuex狀態管理，並導出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中引入剛剛創建好的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裏的全局數據，可以把vue看做一個類，在其下面有許多屬性，其中有我們剛剛注入的vuex，如圖
我們可以看到vue他本身就是一個json，在其下有$store這個對象，而$store下又有state，state下得就是我們存儲在vue中的全局數據，在組件中通過this.$store.state.token即可獲得我們的數據。
三、vuex的核心概念之getters
有時候我們需要在獲得的數據做一些簡單的過濾或者處理的時候，getters就起到作用了。
代碼如下
getters:{
getToken(state){
return state.token;
}
同直接獲取token的方式一樣。getters也已經掛載到了$store下，故，我們可以通過this.$store.state.getters.getToken的方式，調用其函數。 但vuex爲我們提供了mapGetters能夠將其映射到對應的getters的方法上去，用法如下所示
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理解成一個事件函數，而actions就是觸發器，通過actions，發起動作。
簡單實例代碼如下。
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核心，
需要注意的是如果在模塊內部加入了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中的狀態，如圖所示
geta爲模塊a下得getters屬性，在獲取的時候就需要這樣
computed:{
// ...mapGetters(["getToken"])
...mapGetters("a",["geta"])
},
mounted() {
console.log(this)
console.log(this.geta)
而如果模塊沒有命令空間的話，vuex會自動將模塊內的getters，actions注入爲全局的，直接按照原來個獲取方式就可以了。
六、總結
這是我對vuex的基本用法和基本理解方式，vuex當然不可能侷限於此，此處只列舉了最簡單的，做個總結的同時也等同於記下，據說vue3塊出了，是用ts重寫的vue，到時再去看看，vue3又有了哪些變化，和哪些可取之處。本文所寫，有不對的地方，大家多多提出來。共同進步。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。