Suivez-vous étape par étape pour démarrer rapidement avec vuex4 !

vuex4 Démarrez rapidement

vuex4 est une version compatible de vue3 et fournit la même API que vuex3. Nous pouvons donc réutiliser le code vuex existant dans vue3.

Apprentissage recommandé : "La dernière sélection de 5 didacticiels vidéo vue.js"

1. Installation et initialisation

Installation de vuex4 :

npm install vuex@next

Afin de s'aligner sur la méthode d'initialisation de vue3, le vuex4 la méthode d'initialisation est effectuée. Selon les modifications correspondantes, utilisez la nouvelle fonction createStore pour créer une nouvelle instance de magasin.

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. L'utilisation de vuex4 dans le composant

2.1. Scénario d'utilisation 1

Utilisez-le directement dans le modèle du composant, conformément à l'API précédente

// 在 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. stocker via useStore Introduisez-le dans le composant, puis exploitez le magasin.

<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. Scénario d'utilisation 3

Lorsque plusieurs valeurs sont utilisées dans le magasin, les données de store.state peuvent être directement développées via la méthode toRefs.

<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. L'utilisation des getters

est cohérente avec l'utilisation précédente :

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 L'utilisation de mutations et d'actions

Lors de l'appel de méthodes dans des mutations, utilisez l'appel de validation. Le scénario d'utilisation 2 ci-dessus est la méthode d'appel de mutations.

Et les actions mettent à jour les données en état de manière asynchrone, elles doivent encore passer par des mutations.

<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>

Le conteneur de magasin est accessible via la propriété this.$store dans le composant, et l'API de composition peut être utilisée à la place via useStore. Les autres utilisations sont fondamentalement les mêmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!