vuex 簡(jiǎn)介
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
通俗的來說，vuex是用于當(dāng)某一狀態(tài)需要在多個(gè)組件中共享，方便我們使用并追蹤這些狀態(tài)時(shí)使用。
1，vuex的總體結(jié)構(gòu)
vuex的總體結(jié)構(gòu)分為 modules下面的所有子模塊和根模塊（即全局狀態(tài)） 這里我把rootState這個(gè)根模塊放到了modules文件夾的外面，當(dāng)然也可以放到里面；最后就是在index 統(tǒng)一進(jìn)行整合。
2，各子模塊的內(nèi)部結(jié)構(gòu)及作用
這是vuex的內(nèi)部代碼結(jié)構(gòu)，所有的子模塊都是一樣的；
state：存放數(shù)據(jù)狀態(tài)；action：指派mutation ；mutation：修改state里面的狀態(tài)；getter：側(cè)重于對(duì)數(shù)據(jù)的再次加工；mdules：用于模塊化；
我們更傾向于把異步請(qǐng)求放到action里面，當(dāng)然vuex官方也有意這么做；一是為了追蹤狀態(tài)，二是為了做代碼隔離，通常不受控的代碼集中到action；受控的操作放到 mutation中，mutation只做純函數(shù)的狀態(tài)改變；
dialog.js
/**
* 彈窗組件模塊 屬于子模塊
*/
const state = {
dialog: '我是dialog',
};
const actions = {
// 把 commit屬性從 context里面解構(gòu)出來
setDialog: ({ commit }, dia) => commit('commitDialog', dia),
};
// 使用 mutation更新 state
const mutations = {
commitDialog: (state, dialog) => (state.dialog = dialog),
};
// 把數(shù)據(jù)導(dǎo)出時(shí)可以對(duì)數(shù)據(jù)做一些操作 但不會(huì)改變?cè)瓟?shù)據(jù)
const getters = {
currentDialog: (state) => state.dialog + '123',
};
export default {
state,
mutations,
actions,
getters,
namespaced: true,
};
// namespaced: true 命名空間這一行一定要寫，這是vuex尋找子組件的依據(jù)；
注意：這個(gè)設(shè)計(jì)和組件傳值一樣，是一個(gè)單向的數(shù)據(jù)流：是為了方便管理各個(gè)狀態(tài)，知道狀態(tài)在哪一步發(fā)生了改變，便于狀態(tài)的維護(hù)和使用；
3，index 文件的結(jié)構(gòu)
上面是引入各個(gè)子模塊的文件，下面在modules對(duì)象里面使用，要注意根模塊一定要放在modules外面，因?yàn)樗翘厥獾模@邊用擴(kuò)展運(yùn)算符直接把roortState解構(gòu)進(jìn)來了。
注意：這里面用到了持久化緩存插件vuex-persistedstate解決了vuex刷新頁(yè)面狀態(tài)丟失的問題，通過這個(gè)插件把vuex里面的數(shù)據(jù)都儲(chǔ)存到了localStorage里面；當(dāng)然你也可以放到sessionStorage里面；只不過要這樣寫：
plugins: [createPersistedState({
storage: window.sessionStorage
})]
index.js
import Vue from 'vue';
import Vuex from 'vuex';
// 持久化緩存
import createPersistedState from 'vuex-persistedstate';
// 下面引入子模塊
import rootState from './rootState'; // 根模塊狀態(tài)管理引入
import dialog from './modules/dialog';
import videoState from './modules/videoState';
Vue.use(Vuex);
export default new Vuex.Store({
...rootState, // 這里存放的是根模塊 也就是全局模塊
modules: {
dialog,
videoState,
},
// 把vuex里面的所有數(shù)據(jù)都儲(chǔ)存到了localStorage里面 不用擔(dān)心刷新數(shù)據(jù)丟失的問題
plugins: [createPersistedState()],
});
4，開始使用
這是對(duì)以下代碼的使用說明，主要配合了vuex輔助函數(shù)來進(jìn)行使用；
1，getDialog() 方法使用子模塊dialog 里面的setDialog方法改變了子模塊的狀態(tài)；
2，getDialogGetter() 方法使用子模塊dialog 里面的Getter屬性獲取了改變之后的數(shù)據(jù)；
Getter用于對(duì)Store中的數(shù)據(jù)進(jìn)行加工，處理形成新的數(shù)據(jù)，不會(huì)修改Store中的原數(shù)據(jù)，類似計(jì)算屬性。但Store中數(shù)據(jù)發(fā)生變化，Getter的數(shù)據(jù)也會(huì)跟著變化；
3，getRootState() 方法使用根組件的setRootStatue方法改變了全局狀態(tài)，注意：獲取根組件的方法時(shí) 后面要加上{root:true}來標(biāo)明這是根組件；可以參考我下面的寫法；
4 ，getRootState2() 方法可以直接獲取根組件里面的狀態(tài)；這里在業(yè)務(wù)邏輯上可以做一些判斷什么的
頁(yè)面中使用：
<template>
<!-- 父組件 -->
<div class="dialog">
<button @click="getDialog">使用子組件dialog里面的方法改變狀態(tài)</button>
<br />
<button class="_getter" @click="getDialogGetter">獲取彈窗組件getter返回的數(shù)據(jù)</button>
<br>
<button class="_getter" @click="getRootState">使用根模塊里面的方法</button>
<br>
<button class="_getter" @click="getRootState2">獲取根模塊里面的數(shù)據(jù)</button>
</div>
</template>
<script>
// 1.引入輔助函數(shù)
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
name: '',
mixins: [],
components: {
},
props: {},
data() {
return {
};
},
computed: {
// mapState 和 mapGetters
...mapState('dialog', ['dialog']),
// 這里想要訪問根模塊里面的方法 需要這樣寫后面加上 {root:true}
...mapState(['rootStatue',{root:true}]),
...mapGetters('dialog', ['currentDialog']),
},
watch: {},
created() {},
mounted() {},
methods: {
// 2，使用
...mapActions('dialog', ['setDialog']),
// 這里想要訪問根模塊里面的方法 需要這樣寫后面加上 {root:true}
...mapActions(['setRootStatue',{root:true}]),
// 使用子組件dialog里面的方法改變狀態(tài)
getDialog() {
console.log('之前的數(shù)據(jù)：', this.dialog);
// 3，改狀態(tài)
this.setDialog('nihao');
//4，查看是否改動(dòng)成功 改動(dòng)成功
console.log('之后的數(shù)據(jù)：', this.dialog);
},
// 獲取getter里面的內(nèi)容
getDialogGetter() {
let dialogGetter = this.currentDialog;
console.log('獲取getter里面返回的數(shù)據(jù)：', dialogGetter);
},
// 使用根模塊里面的方法改變狀態(tài)
getRootState(){
console.log('之前的數(shù)據(jù)：', this.rootStatue);
this.setRootStatue('false')
console.log('改變后的數(shù)據(jù)：', this.rootStatue);
},
// 獲取根模塊里面的數(shù)據(jù)
getRootState2(){
console.log("根模塊的數(shù)據(jù)：",this.rootStatue);
},
},
};
</script>
<style scoped lang="scss">
.tipsDialog {
cursor: pointer;
}
._getter {
display: block;
margin-top: 10px;
}
</style>
rootState根組件里面的結(jié)構(gòu)
/**
* 根模塊 儲(chǔ)存全局狀態(tài)管理
*/
const state = {
rootStatue:'true',
};
// 使用 mutation更新 state
const mutations = {
commitRootStatue: (state, sta) => (state.rootStatue = sta),
};
const actions = {
setRootStatue:({commit},sta)=> commit('commitRootStatue',sta,)
};
const getters = {
};
export default {
state,
mutations,
actions,
getters,
namespaced: true,
};
5，總結(jié)
vuex中一共有五個(gè)狀態(tài) State Getter Mutation Action Module ；需要知道他們的關(guān)系和側(cè)重點(diǎn)；
-
Action: 側(cè)重請(qǐng)求數(shù)據(jù)以及對(duì)業(yè)務(wù)邏輯的判斷處理等；
-
Mutation: 側(cè)重于對(duì)state里面的狀態(tài)的修改；
-
Getter : 側(cè)重于對(duì)數(shù)據(jù)的再次加工和處理，如果你對(duì)數(shù)據(jù)的修改或使用卻不想改變?cè)瓟?shù)據(jù)；那么你可以使用它；文章來源：http://www.zghlxwxcb.cn/news/detail-462127.html
-
Modules : 側(cè)重于對(duì)多個(gè)狀態(tài)的管理和分享；文章來源地址http://www.zghlxwxcb.cn/news/detail-462127.html
到了這里，關(guān)于vue - vuex詳細(xì)講解和modules模塊化的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
