目錄
一、目錄結構
二、store倉庫
1. index.js檔案
2. mutations.js檔案代碼
3. actions.js檔案
4. getters.js檔案
5. 在modules檔案夾中，放置頁面的vuex子產品
三、元件中使用 Vuex
1. 引入
2. state
01 - 直接使用
02 - mapState
傳入數組
傳入對象
3. getters
01 - 直接使用
02 - mapGetters
4. mutations
01 - 直接使用
02 - mapMutations
5. actions
01 - 直接使用
02 - mapActions
6. module
Vue3 之 Vuex - 狀态管理_玄魚殇的部落格-CSDN部落格
一、目錄結構
二、store倉庫
1. index.js檔案
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import {mutations} from './mutations'
import actions from './actions'
import getters from './getters'
import Session from '../../../sessionStorage.js'
import eat from './modules/eat' //吃子產品
import drink from './modules/drink' //喝子產品
import play from './modules/play' //玩子產品
import happy from './modules/happy' //樂子產品
export default new Vuex.Store({
state: {
baseHttpUrl: '',//項目的請求位址
baseHttpFileUrl: '',//項目中下載下傳檔案的請求位址
apiBaseParam: {//請求的基本格式
"version": "",
"userId": '',
"token": Session.getItem('abc') ? Session.getItem('abc').token : "",
},
},
modules: {
eat,
drink,
play,
happy,
},
actions,
mutations,
getters
})
2. mutations.js檔案代碼
export const mutations = {
// 設定使用者userId
PRO_SET_ID(state,value){
state.id = value;
},
// 設定類型
PRO_SET_TYPE(state,value){
state.Type = value;
},
// 設定faceLogo
PRO_SET_FACELOGO(state,value){
state.faceLogo = value;
},
}
3. actions.js檔案
//請求的方法
import {
getEatMessage,
getPlayMessage,
} from '_ser/http.js'
export default {
//擷取全部的吃資訊,解構出來
getEatMessage({
commit,
state
},data) {
let param = {
page: 1,
pageSize: 10000,
}
return new Promise((resolve, reject) => {
getEatMessage(param).then(res => {
if (res.code == 200) {
//調用mutations中的方法，存儲資料
commit('EAT_LIST', res.data)
}
resolve(res)
}).catch(err => {
reject(err)
})
})
},
...,
...,
...
}
4. getters.js檔案
export const getters = {
baseHttpUrl(state){
return state.baseHttpUrl
},
......
}
5. 在modules檔案夾中，放置頁面的vuex子產品
/* 吃子產品 */
const eat = {
state: {
time: 'oneDay', //一天
},
mutations: {
//宿管子產品人員資訊的時間
TIME(state, value) {
state.time = value
}
},
getters: {
getTime(state) {
return state.time
}
},
actions: {},
}
export default eat
三、元件中使用 Vuex
1. 引入
import { mapState, mapMutations, mapGetters, mapActions, Store } from "vuex"
2. state
01 - 直接使用
<template>
<!-- 1. 模版中使用 -->
{{ $store.state.baseHttpUrl }}
</template>
<script>
export default {
// 2. 代碼中使用
mounted() {
console.log(this.$store.state.baseHttpUrl);
}
};
</script>
02 - mapState
傳入數組
computed: {
// 直接映射資料過來，但是可能會群組件目前定義的資料名稱産生沖突
...mapState(["name", "level", "avatarURL"])
}
傳入對象
computed: {
// 傳入對象
...mapState({
// 可以取别名
sName: state => state.name,
sLevel: state => state.level
})
}
3. getters
01 - 直接使用
<template>
<!-- 1. 模版中使用 -->
{{ $store.getters.baseHttpUrl }}
</template>
<script>
export default {
// 2. 代碼中使用
mounted() {
console.log(this.$store.getters.baseHttpUrl);
}
};
</script>
02 - mapGetters
export default {
computed: {
...mapGetters(['baseHttpUrl']),
// 取别名
...mapGetters({
bbbbaseUrl:'baseHttpUrl'
}),
}
};
4. mutations
01 - 直接使用
export default {
methods: {
btnClick() {
// 調用mutation中的PRO_SET_ID方法
this.$store.commit('PRO_SET_ID', 666);
}
}
}
02 - mapMutations
export default {
methods: {
...mapMutations(["PRO_SET_ID"]),
...mapMutations({
// 取别名
aaaaaa:"PRO_SET_ID"
}),
btnClick() {
// 直接調用
this.PRO_SET_ID(666);
}
}
}
5. actions
01 - 直接使用
export default {
methods: {
btnClick() {
// 調用actions中的getEatMessage，并傳入資料
this.$store.dispatch('getEatMessage', 666);
}
}
};
02 - mapActions
export default {
methods: {
...mapActions(['getEatMessage']),
...mapActions({
// 取别名
aaaa:'getEatMessage'
}),
btnClick() {
// 直接調用
this.getEatMessage(666);
}
}
};
6. module
懶得寫啦，這裡一樣哒，哦豁～