Führen Sie Sie Schritt für Schritt durch, um schnell mit vuex4 loszulegen!-View.js-php.cn

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

藏色散人

Freigeben： 2021-11-12 14:02:26

nach vorne

2313 Leute haben es durchsucht

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

Nach dem Login kopieren

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 &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router&#39;
import { createStore } from "vuex"
const store = createStore({
 state(){
  return{
   num:1,
  }
 }
})
const app = createApp(App)
app.use(router)
app.use(store)
app.mount(&#39;#app&#39;)
//在组件内使用时与之前一样
<div>{{$store.state.num}}</div>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!