您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue3中Vuex如何使用”,在日常操作中,相信很多人在Vue3中Vuex如何使用問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Vue3中Vuex如何使用”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
Vue官方:狀態(tài)管理工具
需要在多個(gè)組件中共享的狀態(tài)、且是響應(yīng)式的、一個(gè)變,全都改變。
例如一些全局要用的的狀態(tài)信息:用戶登錄狀態(tài)、用戶名稱、地理位置信息、購(gòu)物車中商品、等等
這時(shí)候我們就需要這么一個(gè)工具來(lái)進(jìn)行全局的狀態(tài)管理,Vuex就是這樣的一個(gè)工具。
View–>Actions—>State
視圖層(view)觸發(fā)操作(action)更改狀態(tài)(state)響應(yīng)回視圖層(view)
store/index.js 創(chuàng)建store對(duì)象并導(dǎo)出store
import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { } })
main.js 引入并使用
... import store from './store' ... app.use(store)
vue2 中可以通過(guò) this.$store.xxx 的方式拿到 store 的實(shí)例對(duì)象。
vue3 中的 setup 在 beforecreate 和 created 前執(zhí)行,此時(shí) vue對(duì)象還未被創(chuàng)建,沒(méi)有了之前的this,所以此處我們需要用到另一種方法來(lái)獲取到 store 對(duì)象。
import { useStore } from 'vuex' // 引入useStore 方法 const store = useStore() // 該方法用于返回store 實(shí)例 console.log(store) // store 實(shí)例對(duì)象
存放數(shù)據(jù)的地方
state: { count: 100, num: 10 },
使用:使用方法大致與vue2.x中的版本相同,通過(guò) $store.state.屬性名 來(lái)獲取state中的屬性。
//template中 <span>{{$store.state.count}}</span> <span>{{$store.state.num}}</span>
可以在 state 中直接進(jìn)行數(shù)據(jù)變化的操作,但Vue不建議這么做。因?yàn)閷?duì)于vue開發(fā)工具 devtools 來(lái)說(shuō),直接在state中進(jìn)行數(shù)據(jù)改變,devtools是跟蹤不到的。vuex中希望通過(guò) action(進(jìn)行異步操作)或是 mutations(同步操作)來(lái)進(jìn)行數(shù)據(jù)改變的操作,這樣在 devtools 中才能直接觀察出數(shù)據(jù)的變化以及記錄,方便開發(fā)者調(diào)試。
另外,在vue3 中對(duì)state 中對(duì)象新增屬性或刪除時(shí),不再需要通過(guò) vue.set() , 或是 vue.delete() 來(lái)進(jìn)行對(duì)象的響應(yīng)式處理了,直接新增的對(duì)象屬性已經(jīng)具有響應(yīng)式。
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 中通過(guò) $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 } }
通過(guò) commit 的payload 進(jìn)行參數(shù)傳遞
使用 store.commit('mution中函數(shù)名', '需要傳遞的參數(shù)' ) 在commit里添加參數(shù)的方式進(jìn)行傳遞
<h4>{{this.$store.state.count}}</h4> <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ù) 兩部分, 和通過(guò)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 } }
異步操作在action中進(jìn)行,再傳遞到mutation
action基本使用如下:
action 中定義的方法默認(rèn)參數(shù)為** context 上下文**, 可以理解為 store 對(duì)象
通過(guò) context 上下文對(duì)象,拿到store,通過(guò) commit 觸發(fā) mution 中的方法,以此來(lái)完成異步操作
... mutations: { sum (state, num) { state.count += num } }, actions: { // context 上下文對(duì)象,可以理解為store sum_actions (context, num) { setTimeout(() => { context.commit('sum', num) // 通過(guò)context去觸發(fā)mutions中的sum }, 1000) } },
在template 中通過(guò)dispatch 調(diào)用action 中定義的sum_action 方法
// ...template store.dispatch('sum_actions', num)
通過(guò) 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(() => { // 通過(guò) context 上下文對(duì)象拿到 count if (context.state.count < 30) { context.commit('sum', payload.num) resolve('異步操作執(zhí)行成功') } else { reject(new Error('異步操作執(zhí)行錯(cuò)誤')) } }, 1000) }) } },
類似于組件的計(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)} } })
使用 通過(guò)$store.getters.方法名 進(jìn)行調(diào)用
//...template <h4>{{$store.getters.more20stu}}</h4> // 展示出小于20歲的學(xué)生
getters 的入?yún)? getters 可以接收兩個(gè)參數(shù),一個(gè)是 state, 一個(gè)是自身的 getters ,并對(duì)自身存在的方法進(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 ) } } // 該寫法與上邊寫法相同但更簡(jiǎn)潔,用到了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 <h4>{{$store.getters.more20stu}}</h4> // 展示出小于20歲的學(xué)生 <h4>{{$store.getters.moreAgestu(18)}}</h4> // 通過(guò)參數(shù)傳遞, 展示出年齡小于18的學(xué)生
當(dāng)應(yīng)用變得復(fù)雜時(shí),state中管理的變量變多,store對(duì)象就有可能變得相當(dāng)臃腫。
為了解決這個(gè)問(wèn)題,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 處理購(gòu)物車相關(guān)功能
// user.js模塊 // 導(dǎo)出 export default { namespaced: true, // 為每個(gè)模塊添加一個(gè)前綴名,保證模塊命明不沖突 state: () => {}, mutations: {}, actions: {} }
最終通過(guò) 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中模塊中的寫法和無(wú)模塊的寫法大同小異,帶上模塊的名稱即可
<h4>{{$store.state.user.count}}</h4>
store.commit('user/sum', num) // 參數(shù)帶上模塊名稱 store.dispatch('user/sum_actions', sum)
到此,關(guān)于“Vue3中Vuex如何使用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。