Membawa anda selangkah demi selangkah untuk memulakan dengan cepat dengan vuex4!

Vuex4 Bermula dengan pantas

Vuex4 ialah versi vue3 yang serasi dan menyediakan API yang sama seperti vuex3. Jadi kita boleh menggunakan semula kod vuex sedia ada dalam vue3.

Pembelajaran yang disyorkan: "Pilihan tutorial video 5 vue.js terbaharu"

1 🎜>pemasangan vuex4:

Untuk menyelaraskan dengan kaedah permulaan vue3, kaedah permulaan vuex4 telah ditukar sewajarnya, menggunakan fungsi createStore baharu untuk mencipta tika kedai baharu.

npm install vuex@next

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. Penggunaan vuex4 dalam komponen

2.1 Senario penggunaan 1

digunakan secara langsung dalam templat komponen, yang mana adalah sama seperti sebelumnya Api kekal konsisten

2.2, senario penggunaan 2

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

Perkenalkan stor ke dalam komponen melalui useStore, dan kemudian kendalikan stor.

2.3. Senario Penggunaan 3

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

Apabila berbilang nilai digunakan dalam stor, data dalam store.state boleh terus dikembangkan melalui kaedah 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 Penggunaan getter

kekal konsisten dengan penggunaan sebelumnya:

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

Apabila memanggil kaedah dalam mutasi, gunakan panggilan komit. Senario penggunaan 2 di atas ialah kaedah panggilan mutasi.

Dan tindakan mengemas kini data dalam keadaan tidak segerak, mereka masih perlu melalui mutasi.

Bekas kedai boleh diakses melalui sifat this.$store dalam komponen dan API komposisi boleh digunakan sebaliknya melalui useStore. Penggunaan lain pada dasarnya adalah sama.

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

Atas ialah kandungan terperinci Membawa anda selangkah demi selangkah untuk memulakan dengan cepat dengan vuex4!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!