Vue3中Vuex的詳細使用方法
Vuex是做什麼的?
Vue官方:狀態管理工具
狀態管理是什麼?
需要在多個組件中共享的狀態、且是響應式的、一個變,全都改變。
例如一些全局要用的的狀態信息:用戶登錄狀態、用戶名稱、地理位置信息、購物車中商品、等等
這時候我們就需要這麼一個工具來進行全局的狀態管理,Vuex就是這樣的一個工具。
單頁面的狀態管理
View–>Actions—>State
視圖層(view)觸發操作(action)更改狀態(state)響應回視圖層(view)
vuex(Vue3.2版本)
store/index.js 創建store對象並導出store
import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { } })
main.js 引入並使用
... import store from './store' ... app.use(store)
多頁狀態管理
vuex store對象屬性介紹
Vue3中獲取 store 實例對象的方法
vue2 中可以通過 this.$store.xxx 的方式拿到 store 的實例對象。
vue3 中的 setup 在 beforecreate 和 created 前執行,此時 vue對象還未被創建,沒有瞭之前的this,所以此處我們需要用到另一種方法來獲取到 store 對象。
import { useStore } from 'vuex' // 引入useStore 方法 const store = useStore() // 該方法用於返回store 實例 console.log(store) // store 實例對象
1. state
存放數據的地方
state: { count: 100, num: 10 },
使用:使用方法大致與vue2.x中的版本相同,通過 $store.state.屬性名 來獲取state中的屬性。
//template中 <span>{{$store.state.count}}</span> <span>{{$store.state.num}}</span>
可以在 state 中直接進行數據變化的操作,但Vue不建議這麼做。因為對於vue開發工具 devtools 來說,直接在state中進行數據改變,devtools是跟蹤不到的。vuex中希望通過 action(進行異步操作)或是 mutations(同步操作)來進行數據改變的操作,這樣在 devtools 中才能直接觀察出數據的變化以及記錄,方便開發者調試。
另外,在vue3 中對state 中對象新增屬性或刪除時,不再需要通過 vue.set() , 或是 vue.delete() 來進行對象的響應式處理瞭,直接新增的對象屬性已經具有響應式。
2. mutations
vuex的store狀態更新的唯一方式:提交 mutation
同步操作可以直接在mutatuions中直接進行
mutions 主要包含2部分:
- 字符串的事件類型 (type)
- 一個**回調函數(handler)**該回調函數的第一個參數是 state
mutations: { // 傳入 state increment (state) { state.count++ } }
template 中通過 $store.commit('方法名') 觸發
在 vue3.x 中需要拿到** store 實例的話,需要調用 useStore **這樣一個函數,在 vuex 中導入
// 導入 useStore 函數 import { useStore } from 'vuex' const store = useStore() store.commit('increment')
mution 的參數與傳參方法
mution 接收參數直接寫在定義的方法裡邊即可接受傳遞的參數
// ...state定義count mutations: { sum (state, num) { state.count += num } }
通過 commit 的payload 進行參數傳遞
使用 store.commit('mution中函數名', '需要傳遞的參數' ) 在commit裡添加參數的方式進行傳遞
<h2>{{this.$store.state.count}}</h2> <button @click="add(10)">++</button> ... <script setup> // 獲取store實例,獲取方式看上邊獲取store實例方法 const add = (num) => { store.commit('sum', num) } </script>
mution 的提交風格
前面提到瞭 mution 主要包含 type 和 回調函數 兩部分, 和通過commit payload的方式進行參數傳遞(提交),下面我們可以
用這種方式進行 mution 的提交
const add = (num) => { store.commit({ type: 'sum', // 類型就是mution中定義的方法名稱 num }) } ... mutations: { sum (state, payload) { state.count += payload.num } }
3. actions
異步操作在action中進行,再傳遞到mutation
action基本使用如下:
action 中定義的方法默認參數為** context 上下文**, 可以理解為 store 對象
通過 context 上下文對象,拿到store,通過 commit 觸發 mution 中的方法,以此來完成異步操作
... mutations: { sum (state, num) { state.count += num } }, actions: { // context 上下文對象,可以理解為store sum_actions (context, num) { setTimeout(() => { context.commit('sum', num) // 通過context去觸發mutions中的sum }, 1000) } },
在template 中通過dispatch 調用action 中定義的sum_action 方法
// ...template store.dispatch('sum_actions', num)
通過 promise 實現異步操作完成,通知組件異步執行成功或是失敗。
// ... const addAction = (num) => { store.dispatch('sum_actions', { num }).then((res) => { console.log(res) }).catch((err) => { console.log(err) }) }
sun_action方法返回一個promise,當累加的值大於30時不再累加,拋出錯誤。
actions: { sum_actions (context, payload) { return new Promise((resolve, reject) => { setTimeout(() => { // 通過 context 上下文對象拿到 count if (context.state.count < 30) { context.commit('sum', payload.num) resolve('異步操作執行成功') } else { reject(new Error('異步操作執行錯誤')) } }, 1000) }) } },
4. getters
類似於組件的計算屬性
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.方法名 進行調用
//...template <h2>{{$store.getters.more20stu}}</h2> // 展示出小於20歲的學生
getters 的入參, getters 可以接收兩個參數,一個是 state, 一個是自身的 getters ,並對自身存在的方法進行調用。
getters: { more20stu (state, getters) { return getters.more20stu.length} }
getters 的參數與傳參方法
上面是getters固定的兩個參數,如果你想給getters傳遞參數,讓其篩選大於 age 的人,可以這麼做
返回一個 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中的箭頭函數,如想瞭解es6箭頭函數的寫法 // 可以看這篇文章 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歲的學生 <h2>{{$store.getters.moreAgestu(18)}}</h2> // 通過參數傳遞, 展示出年齡小於18的學生
5. modules
當應用變得復雜時,state中管理的變量變多,store對象就有可能變得相當臃腫。
為瞭解決這個問題,vuex允許我們將store分割成模塊化(modules),而每個模塊擁有著自己的state、mutation、action、getters等
在store文件中新建modules文件夾
在modules中可以創建單一的模塊,一個模塊處理一個模塊的功能
store/modules/user.js 處理用戶相關功能
store/modules/pay.js 處理支付相關功能
store/modules/cat.js 處理購物車相關功能
// user.js模塊 // 導出 export default { namespaced: true, // 為每個模塊添加一個前綴名,保證模塊命明不沖突 state: () => {}, mutations: {}, actions: {} }
最終通過 store/index.js 中進行引入
// 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) // 參數帶上模塊名稱 store.dispatch('user/sum_actions', sum)
總結
到此這篇關於Vue3中Vuex詳細使用的文章就介紹到這瞭,更多相關Vue3中Vuex使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!