Vue3中Vuex的詳細(xì)使用方法
Vuex是做什么的？
Vue官方：狀態(tài)管理工具
狀態(tài)管理是什么?
需要在多個(gè)組件中共享的狀態(tài)、且是響應(yīng)式的、一個(gè)變，全都改變。
例如一些全局要用的的狀態(tài)信息：用戶登錄狀態(tài)、用戶名稱、地理位置信息、購物車中商品、等等
這時(shí)候我們就需要這么一個(gè)工具來進(jìn)行全局的狀態(tài)管理，Vuex就是這樣的一個(gè)工具。
單頁面的狀態(tài)管理
View–>Actions—>State
視圖層(view)觸發(fā)操作(action)更改狀態(tài)(state)響應(yīng)回視圖層(view)
vuex（Vue3.2版本）
store/index.js 創(chuàng)建store對象并導(dǎo)出store
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
main.js 引入并使用
... import store from './store' ... app.use(store)
多頁狀態(tài)管理
vuex store對象屬性介紹
Vue3中獲取 store 實(shí)例對象的方法
vue2 中可以通過 this.$store.xxx 的方式拿到 store 的實(shí)例對象。
vue3 中的 setup 在 beforecreate 和 created 前執(zhí)行，此時(shí) vue對象還未被創(chuàng)建，沒有了之前的this，所以此處我們需要用到另一種方法來獲取到 store 對象。
import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore() // 該方法用于返回store 實(shí)例
console.log(store) // store 實(shí)例對象
1. state
存放數(shù)據(jù)的地方
state: {
count: 100,
num: 10
},
使用：使用方法大致與vue2.x中的版本相同，通過 $store.state.屬性名 來獲取state中的屬性。
//template中
<span>{{$store.state.count}}</span>
<span>{{$store.state.num}}</span>
可以在 state 中直接進(jìn)行數(shù)據(jù)變化的操作，但Vue不建議這么做。因?yàn)閷τ趘ue開發(fā)工具 devtools 來說，直接在state中進(jìn)行數(shù)據(jù)改變，devtools是跟蹤不到的。vuex中希望通過 action（進(jìn)行異步操作）或是 mutations（同步操作）來進(jìn)行數(shù)據(jù)改變的操作，這樣在 devtools 中才能直接觀察出數(shù)據(jù)的變化以及記錄，方便開發(fā)者調(diào)試。
另外，在vue3 中對state 中對象新增屬性或刪除時(shí)，不再需要通過 vue.set() , 或是 vue.delete() 來進(jìn)行對象的響應(yīng)式處理了，直接新增的對象屬性已經(jīng)具有響應(yīng)式。
2. mutations
vuex的store狀態(tài)更新的唯一方式：提交 mutation
同步操作可以直接在mutatuions中直接進(jìn)行
mutions 主要包含2部分:
- 字符串的事件類型 (type)
- 一個(gè)**回調(diào)函數(shù)（handler）**該回調(diào)函數(shù)的第一個(gè)參數(shù)是 state
mutations: {
// 傳入 state
increment (state) {
state.count++
}
}
template 中通過 $store.commit('方法名') 觸發(fā)
在 vue3.x 中需要拿到** store 實(shí)例的話，需要調(diào)用 useStore **這樣一個(gè)函數(shù)，在 vuex 中導(dǎo)入
// 導(dǎo)入 useStore 函數(shù)
import { useStore } from 'vuex'
const store = useStore()
store.commit('increment')
mution 的參數(shù)與傳參方法
mution 接收參數(shù)直接寫在定義的方法里邊即可接受傳遞的參數(shù)
// ...state定義count
mutations: {
sum (state, num) {
state.count += num
}
}
通過 commit 的payload 進(jìn)行參數(shù)傳遞
使用 store.commit('mution中函數(shù)名', '需要傳遞的參數(shù)' ) 在commit里添加參數(shù)的方式進(jìn)行傳遞
<h2>{{this.$store.state.count}}</h2>
<button @click="add(10)">++</button>
...
<script setup>
// 獲取store實(shí)例，獲取方式看上邊獲取store實(shí)例方法
const add = (num) => {
store.commit('sum', num)
}
</script>
mution 的提交風(fēng)格
前面提到了 mution 主要包含 type 和 回調(diào)函數(shù) 兩部分, 和通過commit payload的方式進(jìn)行參數(shù)傳遞（提交）,下面我們可以
用這種方式進(jìn)行 mution 的提交
const add = (num) => {
? store.commit({
? ? type: 'sum', ?// 類型就是mution中定義的方法名稱
? ? num
? })
}
...
mutations: {
? sum (state, payload) {
? ? state.count += payload.num
? }
}3. actions
異步操作在action中進(jìn)行，再傳遞到mutation
action基本使用如下：
action 中定義的方法默認(rèn)參數(shù)為** context 上下文**， 可以理解為 store 對象
通過 context 上下文對象，拿到store，通過 commit 觸發(fā) mution 中的方法，以此來完成異步操作
...
mutations: {
sum (state, num) {
state.count += num
}
},
actions: {
// context 上下文對象，可以理解為store
sum_actions (context, num) {
setTimeout(() => {
context.commit('sum', num) // 通過context去觸發(fā)mutions中的sum
}, 1000)
}
},
在template 中通過dispatch 調(diào)用action 中定義的sum_action 方法
// ...template
store.dispatch('sum_actions', num)
通過 promise 實(shí)現(xiàn)異步操作完成，通知組件異步執(zhí)行成功或是失敗。
// ...
const addAction = (num) => {
store.dispatch('sum_actions', {
num
}).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
sun_action方法返回一個(gè)promise，當(dāng)累加的值大于30時(shí)不再累加，拋出錯(cuò)誤。
actions: {
sum_actions (context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
// 通過 context 上下文對象拿到 count
if (context.state.count < 30) {
context.commit('sum', payload.num)
resolve('異步操作執(zhí)行成功')
} else {
reject(new Error('異步操作執(zhí)行錯(cuò)誤'))
}
}, 1000)
})
}
},
4. getters
類似于組件的計(jì)算屬性
import { createStore } from 'vuex'
export default createStore({
state: {
students: [{ name: 'mjy', age: '18'}, { name: 'cjy', age: '22'}, { name: 'ajy', age: '21'}]
},
getters: {
more20stu (state) { return state.students.filter(item => item.age >= 20)}
}
})
使用 通過$store.getters.方法名 進(jìn)行調(diào)用
//...template
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于20歲的學(xué)生
getters 的入?yún)? getters 可以接收兩個(gè)參數(shù)，一個(gè)是 state, 一個(gè)是自身的 getters ，并對自身存在的方法進(jìn)行調(diào)用。
getters: {
more20stu (state, getters) { return getters.more20stu.length}
}
getters 的參數(shù)與傳參方法
上面是getters固定的兩個(gè)參數(shù)，如果你想給getters傳遞參數(shù)，讓其篩選大于 age 的人，可以這么做
返回一個(gè) function 該 function 接受 Age，并處理
getters: {
more20stu (state, getters) { return getters.more20stu.length},
moreAgestu (state) {
return function (Age) {
return state.students.filter(item =>
item.age >= Age
)
}
}
// 該寫法與上邊寫法相同但更簡潔，用到了ES6中的箭頭函數(shù)，如想了解es6箭頭函數(shù)的寫法
// 可以看這篇文章 https://blog.csdn.net/qq_45934504/article/details/123405813?spm=1001.2014.3001.5501
moreAgestu_Es6: state => {
return Age => {
return state.students.filter(item => item.age >= Age)
}
}
}
使用
//...template
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于20歲的學(xué)生
<h2>{{$store.getters.moreAgestu(18)}}</h2> // 通過參數(shù)傳遞, 展示出年齡小于18的學(xué)生
5. modules
當(dāng)應(yīng)用變得復(fù)雜時(shí)，state中管理的變量變多，store對象就有可能變得相當(dāng)臃腫。
為了解決這個(gè)問題，vuex允許我們將store分割成模塊化（modules），而每個(gè)模塊擁有著自己的state、mutation、action、getters等
在store文件中新建modules文件夾
在modules中可以創(chuàng)建單一的模塊，一個(gè)模塊處理一個(gè)模塊的功能
store/modules/user.js 處理用戶相關(guān)功能
store/modules/pay.js 處理支付相關(guān)功能
store/modules/cat.js 處理購物車相關(guān)功能
// user.js模塊
// 導(dǎo)出
export default {
namespaced: true, // 為每個(gè)模塊添加一個(gè)前綴名，保證模塊命明不沖突
state: () => {},
mutations: {},
actions: {}
}最終通過 store/index.js 中進(jìn)行引入
// store/index.js
import { createStore } from 'vuex'
import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({
modules: {
user,
pay,
cat
}
})在template中模塊中的寫法和無模塊的寫法大同小異，帶上模塊的名稱即可
<h2>{{$store.state.user.count}}</h2>
store.commit('user/sum', num) // 參數(shù)帶上模塊名稱
store.dispatch('user/sum_actions', sum)
總結(jié)
到此這篇關(guān)于Vue3中Vuex詳細(xì)使用的文章就介紹到這了,更多相關(guān)Vue3中Vuex使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法
這篇文章主要介紹了vue中圖片轉(zhuǎn)base64格式實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue插件--仿微信小程序showModel實(shí)現(xiàn)模態(tài)提示窗功能
這篇文章主要介紹了vue插件--仿微信小程序showModel實(shí)現(xiàn)模態(tài)提示窗,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
這篇文章為大家詳細(xì)主要介紹了vue之ele多級聯(lián)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue中使用vee-validator完成表單校驗(yàn)方案
vee-validator是一種基于vue模板的輕量級校驗(yàn)框架。本文主要討論的是vee-validator校驗(yàn)方案，感興趣的朋友跟隨小編一起看看吧2019-11-11
Vue WatchEffect函數(shù)創(chuàng)建高級偵聽器
watchEffect傳入的函數(shù)會被立即執(zhí)行一次，并且在執(zhí)行的過程中會收集依賴；其次，只有收集的依賴發(fā)生變化時(shí)，watchEffect傳入的函數(shù)才會再次執(zhí)行2023-03-03
elementui之el-table-column日期格式顯示方式
文章介紹了如何使用formatter屬性對表格某一列的內(nèi)容進(jìn)行日期格式化,通過綁定日期格式化的方法實(shí)現(xiàn),展示了前端代碼的模板和方法,并給出了前端效果的展示2024-12-12
vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建的詳細(xì)步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue修改vue項(xiàng)目運(yùn)行端口號的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本篇文章主要介紹了使用vue制作FullPage頁面滾動效果，詳細(xì)的介紹了FullPage頁面的思路和實(shí)現(xiàn)，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue自嵌套樹組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08