這篇文章主要講解了“怎么使用vuex4”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用vuex4”吧！

創(chuàng)新互聯(lián)專注于長汀企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。長汀網(wǎng)站建設(shè)公司,為長汀等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

一、安裝以及初始化

vuex4安裝：

npm install vuex@next

為了向vue3初始化方式看齊，vuex4 初始化方式做了相應(yīng)的變化，使用新的 createStore 函數(shù)創(chuàng)建新的 store 實(shí)例。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createStore } from "vuex"
const store = createStore({
 state(){
  return{
   num:1,
  }
 }
})
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
//在組件內(nèi)使用時(shí)與之前一樣
{{$store.state.num}}

二、vuex4在組件內(nèi)的使用

2.1、使用場景1

在組件的模板中直接使用，與之前的api保持一致

// 在 main.js 內(nèi)
const store = createStore({
 state(){
  return{
   num:1,
  }
 },
 mutations:{
  addNum(state){
   state.num++
  }
 },
 actions:{},
 modules:{}
})
//組件內(nèi)

 {{$store.state.num}}
 num自加   

2.2、使用場景2

通過 useStore 把store 引入組件內(nèi)，然后操作 store 。

2.3、使用場景3

store 內(nèi)使用到多個(gè)值時(shí)，可以通過 toRefs 方法，將 store.state 內(nèi)的數(shù)據(jù)直接展開。

三、 getters 的用法

與之前的用法保持一致：

const store = createStore({
 state(){
  return{
   num:1,
  }
 },
 getters:{
  doubleNum(state){
   return state.num*2
  }
 },
})
//使用1：直接在template中使用

//使用2：利用計(jì)算屬性獲取

四、mutations 和 actions 的用法

調(diào)用 mutations 內(nèi)的方法時(shí)，使用 commit 調(diào)用。上述的使用場景2 就是 mutations 方法的調(diào)用。

而 actions 異步更新 state 中的數(shù)據(jù)，還是需要經(jīng)過 mutations 。

組件內(nèi)可以通過 this.$store 屬性訪問store容器，使用 composition API 可以通過 useStore代替。其他的用法基本相同。

感謝各位的閱讀，以上就是“怎么使用vuex4”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么使用vuex4這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！