vuex4 をすぐに使い始めるためのステップバイステップをご案内します。-Vue.js-php.cn

vuex4 をすぐに使い始めるためのステップバイステップをご案内します。

藏色散人

リリース： 2021-11-12 14:02:26

転載

2314 人が閲覧しました

vuex4 すぐに始めましょう

vuex4 は vue3 の互換バージョンであり、vuex3 と同じ API を提供します。したがって、既存の vuex コードを vue3 で再利用できます。

推奨学習: 「最新の 5 つの vue.js ビデオチュートリアルセレクション」

1. インストールと初期化

vuex4 のインストール:

npm install vuex@next

ログイン後にコピー

vue3 の初期化メソッドに合わせて、vuex4 の初期化メソッドが変更され、新しい createStore 関数を使用して新しいストアインスタンスが作成されました。

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>

ログイン後にコピー

2. コンポーネントでの vuex4 の使用

2.1. 使用シナリオ 1

コンポーネントのテンプレートで直接使用します。以前の 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. 使用シナリオ 2

useStore を通じてコンポーネントにストアを導入し、ストアを操作します。

<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. 使用シナリオ 3

ストアで複数の値が使用される場合、store.state 内のデータは 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. getters

の使用法は前の使用法と一致しています:

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. 突然変異とアクションの使用法

ミューテーション内でメソッドを呼び出す場合は、commit を使用します。上記の使用シナリオ 2 は、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>

ログイン後にコピー

ストアコンテナーには、コンポーネントの this.$store プロパティを通じてアクセスでき、代わりに useStore を通じて合成 API を使用できます。その他の使い方は基本的に同じです。

以上がvuex4 をすぐに使い始めるためのステップバイステップをご案内します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。