Führen Sie Sie Schritt für Schritt durch, um schnell mit vuex4 loszulegen!

vuex4 Schnell loslegen

vuex4 ist eine kompatible Version von vue3 und bietet die gleiche API wie vuex3. So können wir den vorhandenen Vuex-Code in vue3 wiederverwenden.

Empfohlenes Lernen: „Die neueste Auswahl von 5 vue.js-Video-Tutorials“

1. Installation und Initialisierung

vuex4-Installation:

npm install vuex@next

Um mit der vue3-Initialisierungsmethode übereinzustimmen, muss die vuex4 Die Initialisierungsmethode ist abgeschlossen. Verwenden Sie entsprechend den entsprechenden Änderungen die neue Funktion createStore, um eine neue Geschäftsinstanz zu erstellen.

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')
//在组件内使用时与之前一样
<div>{{$store.state.num}}</div>

2. Die Verwendung von vuex4 in der Komponente

2.1. Verwendungsszenario 1

Verwenden Sie es direkt in der Vorlage der Komponente, im Einklang mit der vorherigen API

// 在 main.js 内
const store = createStore({
 state(){
  return{
   num:1,
  }
 },
 mutations:{
  addNum(state){
   state.num++
  }
 },
 actions:{},
 modules:{}
})
//组件内
<div>
 {{$store.state.num}}
 <button @click="$store.commit(&#39;addNum&#39;)">num自加</button>   
</div>

2.2. Verwendungsszenario 2

Store über useStore Führen Sie es in die Komponente ein und betreiben Sie dann den Store.

<template>
 <div>
  store组件
  {{state.num}}
  <button @click="add">num自加</button> 
 </div>
</template>
<script>
import { useStore } from "vuex"
export default {
 setup(){
  const store = useStore()
  return{
   state:store.state,
   add(){
    store.commit(&#39;addNum&#39;)
   }
  }
 }
}
</script>

2.3. Verwendungsszenario 3

Wenn mehrere Werte im Store verwendet werden, können die Daten in store.state direkt über die toRefs-Methode erweitert werden.

<template>
 <div>
  {{num}}
  <button @click="add">num自加</button>
 </div>
</template>
<script>
import { useStore } from &#39;vuex&#39;
import { toRefs } from "vue"
export default {
 setup(){
  const store = useStore()
  return{
   ...toRefs(store.state),
   add(){
    store.commit(&#39;addNum&#39;)
   }
  }
 }
}
</script>

3. Die Verwendung von Gettern

stimmt mit der vorherigen Verwendung überein:

const store = createStore({
 state(){
  return{
   num:1,
  }
 },
 getters:{
  doubleNum(state){
   return state.num*2
  }
 },
})
//使用1：直接在template中使用
<template>
 {{$store.getters.doubleNum}}
</template>
//使用2：利用计算属性获取
<template>
 <div>
  {{getDouble}}
 </div>
</template>
<script>
import { useStore } from "vuex"
import { computed } from &#39;vue&#39;
export default {
 setup(){
  const store = useStore()
  return{
   state:store.state,
   getDouble:computed(()=>store.getters.doubleNum)
  }
 }
}
</script>

4. Die Verwendung von Mutationen und Aktionen

Verwenden Sie beim Aufrufen von Methoden innerhalb von Mutationen den Commit-Aufruf. Das obige Verwendungsszenario 2 ist die Methode zum Aufrufen von Mutationen.

Und Aktionen aktualisieren die Daten asynchron im Status, sie müssen noch Mutationen durchlaufen.

<template>
 <div>
  {{state.num}}
  <button @click="asyncUpdateNum">更新num</button>
 </div>
</template>
<script>
import { useStore } from "vuex"
export default {
 setup(){
  const store = useStore()
  return{
   state:store.state,
   asyncUpdateNum(){
   store.dispatch(&#39;updateNum&#39;,88)
   }
  }
 }
}
</script>

Auf den Store-Container kann über die Eigenschaft this.$store in der Komponente zugegriffen werden, und die Kompositions-API kann stattdessen über useStore verwendet werden. Andere Verwendungen sind grundsätzlich gleich.

Das obige ist der detaillierte Inhalt vonFühren Sie Sie Schritt für Schritt durch, um schnell mit vuex4 loszulegen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!