Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解
引言
Vuex 是 Vue 全家桶重要組成之一,專為 Vue.js 應(yīng)用程序開發(fā)的 狀態(tài)管理模式 + 庫(kù) ,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
一、目錄結(jié)構(gòu)
demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.js modules/ user.js common.js views/ index.vue App.vue main.js
二、版本依賴
vite: ^2.0.0
vue: ^3.2.8
vuex: ^4.0.0
三、配置Vuex
為了避免所有狀態(tài)集中到一個(gè)對(duì)象或一個(gè)文件而變得臃腫,所有會(huì)按照不同的產(chǎn)品或業(yè)務(wù)線將狀態(tài)樹切割成多個(gè) 模塊 (module),并配置各自的 命名空間 (namespaced),防止?fàn)顟B(tài)重復(fù)沖突。
- 3-1.配置src/store/index.js文件。
// src/store/index.js import Vuex from 'vuex' import User from './modules/user' import Common from './modules/common' export default new Vuex.Store({ modules: { User, Common, } })
- 3-2.配置src/store/modules/user.js文件。
// src/store/modules/user.js import axios from 'axios' const SET_USER_NAME = 'SET_USER_NAME' const SET_RANDOM_IMG = 'SET_RANDOM_IMG' export default { namespaced: true, state: { username: 'Tom', randomImg: 'https://images.dog.ceo/breeds/bulldog-french/n02108915_8258.jpg', }, getters: { getUsername (state) { return state.username }, getRandomImg (state) { return state.randomImg }, }, mutations: { [SET_USER_NAME]: (state, username)=>{ state.username = username }, [SET_RANDOM_IMG]: (state, randomImg)=>{ state.randomImg = randomImg }, }, actions: { async setUsername ({dispatch, commit, getters}, data) { let username = getters.getUsername return new Promise((resolve, reject) => { setTimeout(()=>{ commit('GET_USER_NAME', data) resolve(data) }, 2000) }) }, async setRandomImg ({dispatch, commit, getters}, data) { // let randomImg = getters.getRandomImg return new Promise((resolve, reject) => { axios.get('https://dog.ceo/api/breeds/image/random').then((res) => { let img = res.data.message commit('SET_RANDOM_IMG', img) resolve(img) }) }) }, }, }
- 3-3.在src/main.js入口文件中注冊(cè)使用Vuex。
// src/main.js import { createApp } from 'vue' import router from './router' import store from './store' import App from './App.vue' // ... const app = createApp(App) app.use(router).use(store); app.mount('#app')
四、使用Vuex
- 這里主要介紹一下在Vue3的Composition API中的使用。
// src/views/index.vue <template> <div> <van-image round lazy-load width="200" height="200" :src="img"> <template #loading> <van-loading type="spinner" size="30" /> </template> </van-image> <br> <van-button type="primary" icon="search" zise="mini" text="隨機(jī)dog" :loading="loading" @click="getImg" color="linear-gradient(to right, #ff6034, #ee0a24)" loading-text="loading..." /> </div> </template> <script> import { ref, computed } from 'vue' import { useStore } from 'vuex' export default { setup () { const { state, getters, commit, dispatch } = useStore() let img = computed(()=>getters['User/getRandomImg']) let loading = ref(false) const getImg = async () => { loading.value = true await dispatch('User/setRandomImg') loading.value = false } return { img, loading, getImg, } }, } </script>
提示: 為了訪問(wèn) state 和 getter,需要?jiǎng)?chuàng)建 computed 引用以保留響應(yīng)性,這與在 Options API 中創(chuàng)建計(jì)算屬性等效。
以上就是Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue3 Vuex狀態(tài)管理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于Element-UI中slot的用法及說(shuō)明
這篇文章主要介紹了關(guān)于Element-UI中slot的用法及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue?element-ui的table列表中展示多張圖片(可放大)效果實(shí)例
這篇文章主要給大家介紹了關(guān)于vue?element-ui的table列表中展示多張圖片(可放大)效果的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用的解決
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點(diǎn)的樣式不起作用的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue實(shí)現(xiàn)websocket客服聊天功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)websocket客服聊天功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例,基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-09-09vue封裝el-upload批量上傳只請(qǐng)求一次接口
本文主要介紹了vue封裝el-upload批量上傳只請(qǐng)求一次接口,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05