Vue3中Vuex狀態(tài)管理學(xué)習(xí)實戰(zhàn)示例詳解
引言
Vuex 是 Vue 全家桶重要組成之一,專為 Vue.js 應(yīng)用程序開發(fā)的 狀態(tài)管理模式 + 庫 ,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(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)集中到一個對象或一個文件而變得臃腫,所有會按照不同的產(chǎn)品或業(yè)務(wù)線將狀態(tài)樹切割成多個 模塊 (module),并配置各自的 命名空間 (namespaced),防止狀態(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入口文件中注冊使用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="隨機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>
提示: 為了訪問 state 和 getter,需要創(chuàng)建 computed 引用以保留響應(yīng)性,這與在 Options API 中創(chuàng)建計算屬性等效。
以上就是Vue3中Vuex狀態(tài)管理學(xué)習(xí)實戰(zhàn)示例詳解的詳細內(nèi)容,更多關(guān)于Vue3 Vuex狀態(tài)管理的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue?element-ui的table列表中展示多張圖片(可放大)效果實例
這篇文章主要給大家介紹了關(guān)于vue?element-ui的table列表中展示多張圖片(可放大)效果的相關(guān)資料,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例,基于VUE + OPENLAYERS實現(xiàn)實時定位功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-09-09vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05