vuex在vue3中怎么使用

這篇文章主要介紹“vuex在vue3中怎么使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“vuex在vue3中怎么使用”文章能幫助大家解決問題。

在vue3中，vuex用于儲(chǔ)存和管理所有組件的狀態(tài)，是專為“vue.js”應(yīng)用程序開發(fā)的狀態(tài)管理模式；可以利用mutations可以改變vuex中的數(shù)據(jù)，對(duì)于異步的情況，可用actions提交mutations中的方法改變vuex中的數(shù)據(jù)。

本文操作環(huán)境：windows10系統(tǒng)、Vue3版，DELL G3電腦。

vuex在vue3的用法是什么

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 + 庫(kù)。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

vuex在中大型項(xiàng)目中的應(yīng)用十分廣泛，通常會(huì)把全局都用到的數(shù)據(jù)放在vuex中，方便其他頁(yè)面進(jìn)行使用，在項(xiàng)目中，vuex中存放的數(shù)據(jù)大部分與user_id，權(quán)限等信息相關(guān)，那么在vue3中該怎么使用vuex呢？帶著這個(gè)問題，在本篇文章中，咱們一起分析下

其實(shí)vue3中使用vuex和vue2使用vuex大體相同，都是通過state存放數(shù)據(jù)，通過mutations去改變vuex中的數(shù)據(jù)，對(duì)于異步的情況，通過actions提交mutations中的方法進(jìn)而改變vuex中的數(shù)據(jù)，帶著這個(gè)思路咱們一起使用下vue3中的vuex

在開始寫代碼之前，先來看下我的目錄結(jié)構(gòu)：在store文件下，將vuex分為了如下幾個(gè)ts文件

在index.ts中，將這幾個(gè)模塊暴露出來的方法賦值給對(duì)應(yīng)的模塊

1、如何使用vuex中存放的數(shù)據(jù)

state和vue2一樣，都是存放數(shù)據(jù)的地方，寫法上也一模一樣，這里我定義了一個(gè)count屬性，初始化為0

const state = {
  count: 0,
}
export { state }

這時(shí)我們?cè)趘ue3中的使用方法如下：首先從vuex中引入useStore函數(shù)，他的返回值就是一個(gè)vuex實(shí)例

<template>
  <h2>vuex中的數(shù)據(jù){{ store.state.count }}</h2>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
  name: "index",
  setup() {
    const store = useStore()
    return { store }
  },
})
</script>

在控制臺(tái)中，打印這個(gè)store可以看到store上的一些屬性，很明顯他就是一個(gè)vuex的實(shí)例，它具有g(shù)etter，dispatch，state等屬性

2. 如何改變vuex中的屬性

       vue3和vue2一樣，都是通過提交mutations中的方法，進(jìn)行對(duì)vuex中數(shù)據(jù)的改變，那具體該如何使用呢？首先看一下mutations中的寫法

const mutations = {
  addCount(state, payload) {
    state.count += payload
  },
}
export { mutations }

這里，定義了一個(gè)addCount方法，這個(gè)方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是要改變的state對(duì)象（當(dāng)然你調(diào)用這個(gè)放法的傳參中也可以寫state.count，然后再mutations中直接state += payload就可以了），第二個(gè)參數(shù)是要改變的數(shù)據(jù)，比如進(jìn)行 +1 操作

<template>
  <h2>vuex中的數(shù)據(jù){{ store.state.count }}</h2>
  <button @click="changeStoreCount">改變vuex數(shù)據(jù)</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
  name: "index",
  setup() {
    const store = useStore()
    console.log(store)
    const changeStoreCount = () => {
      // 在這里提交了mutations中的addCount方法
      store.commit("addCount", 1)
    }
    return { store, changeStoreCount }
  },
})
</script>
<style scoped></style>

3、 如何異步改變vuex的數(shù)據(jù)

在vue2中actions通過dispach -> mutations中的方法來實(shí)現(xiàn)的，在vue3中也是如此，但是需要注意的是，vue3中actions的第一個(gè)參數(shù)是固定的，是當(dāng)前vuex的實(shí)例，是不需要你進(jìn)行傳遞的，第二個(gè)參數(shù)是將要進(jìn)行操作的數(shù)據(jù)，在此，筆者使用 +2操作

const actions = {
  asyncAddStoreCount(store, payload) { // 第一個(gè)參數(shù)是vuex固定的參數(shù)，不需要手動(dòng)去傳遞
    store.commit("addCount", payload)
  },
}
export { actions }

<template>
  <h2>vuex中的數(shù)據(jù){{ store.state.count }}</h2>
  <button @click="changeStoreCount">改變vuex數(shù)據(jù)</button>
  <button @click="asyncChangeStoreCount">異步改變vuex數(shù)據(jù)</button>
</template>
<script lang="ts">
import { defineComponent } from "vue"
import { useStore } from "vuex"
export default defineComponent({
  name: "index",
  setup() {
    const store = useStore()
    console.log(store)
    const changeStoreCount = () => {
      store.commit("addCount", 1)
    }
    const asyncChangeStoreCount = () => {
      setTimeout(() => {
   // asyncAddStoreCount是mutations中的方法，2是傳遞過去的數(shù)據(jù)
   // 異步改變vuex用dispatch方法，這里用setTimeout模擬異步操作
        store.dispatch("asyncAddStoreCount", 2)
      }, 1000)
    }
    return { store, changeStoreCount, asyncChangeStoreCount }
  },
})
</script>
<style scoped></style>

效果圖：

1、初始：

2、點(diǎn)擊 【改變vuex數(shù)據(jù)】按鈕：

3、 點(diǎn)擊【異步改變vuex數(shù)據(jù)】（在一秒之后發(fā)生變化）

關(guān)于“vuex在vue3中怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。