快捷導(dǎo)航

Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解

更新時(shí)間：2022年06月30日 10:04:39 作者：天問(wèn)

這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

Vuex 是 Vue 全家桶重要組成之一，專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(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

二、版本依賴(lài)

vite: ^2.0.0
vue: ^3.2.8
vuex: ^4.0.0

三、配置Vuex

為了避免所有狀態(tài)集中到一個(gè)對(duì)象或一個(gè)文件而變得臃腫，所有會(huì)按照不同的產(chǎn)品或業(yè)務(wù)線(xiàn)將狀態(tài)樹(shù)切割成多個(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>

提示：為了訪(fǎng)問(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)文章！

您可能感興趣的文章: