I.はじめに

vue3.0を学んだ後は、vuexも必須の知識ポイントです。学習後、vuex も比較的使いやすいことがわかります。ヒント: プロジェクトは vue-cli でビルドされています。

2. vuex の紹介

公式サイト紹介: Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モデルです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して、状態が予測可能な方法で変化するようにします。

Vuex は、コンポーネントが依存する共有データの集中管理を採用するツール vue プラグインであり、さまざまなコンポーネントのデータ共有の問題を解決できます。

状態はデータを管理し、管理されたデータは応答性が高く、データが変更されたときにビューの更新を駆動します。=> コンポーネントのデータと同様

ミューテーションはデータを更新し、状態のデータはミューテーションを使用してデータを変更することしかできません

アクションはミューテーションにデータを送信します。ミューテーションは非同期操作を実行でき、状態を直接変更することはできません

ゲッターはデータを取得する前に再コンパイルします。これは、状態の計算されたプロパティとして理解できます。

モジュール状態ツリーを異なるモジュールに分離するのに役立ちます. 単一の状態ツリーが使用されるため, アプリケーションのすべての状態は比較的大きなオブジェクトに集中します. アプリケーションが非常に複雑になると、ストアオブジェクトが非常に肥大化する可能性があります。

3. プロジェクトの構築

最初に vue-cli を使用してプロジェクトを作成します

vue create app（项目名称）

個別にインストールして初期化する必要がある vuex を選択せずにプロジェクトを作成する

npm i vuex --save

ストアファイルを作成、プロジェクトファイルのディレクトリは以下

お店のindex.js

//  准备引入 vuex
import { createStore } from 'vuex'

const store = createStore({
    // state:{},
    state(){},
    mutations:{},
    getters:{},
    actions:{},
    modules:{}
})
export default store

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//  引入 vuex  
import store from './store/index'
// 引入 animate.css --save 动画插件
import 'animate.css'
// 挂载 
createApp(App).use(router).use(store).mount('#app')

第四に、vuex の使用

①状態

<script>
import {ref,computed} from 'vue'
import {useStore} from 'vuex'
export default {
  setup() {
    // 方式一
    const msg = ref(null);
    const store = useStore();
    console.log(store.state);
    msg.value = store.state.msg;
    // 方式二
    const computedMsg= computed(()=> store.state.msg)
    return{
      msg,
      computedMsg
    }
  },
}
</script>

②突然変異

 mutations:{
        addCount(state){
            state.count++
        },
        reduceCount(state){
            state.count--
        }
    },

コンポーネントで呼び出される

 methods:{
    ...mapMutations(['addCount']),
    add(){
      // this.$store.commit('addCount');
      // 方式二
      this.addCount()
    },
    reduce(){
      this.$store.commit('reduceCount');
    }
  }

③アクション

actions:{
        asyncAddCount(context){
            setTimeout(()=>{
                context.commit('addCount')
            },1000)
        },
        asyncReduceCount(context){
            setTimeout(()=>{
                context.commit('reduceCount')
            },1000)
        }
    },

コンポーネントで

<template>
  <div class="about">
    <h1>about</h1>
      count:{
   
   {count}}----{
   
   {$store.state.count}}
     <hr>
  <button @click="add">count++</button> <button @click="reduce">count--</button>
 <br>
 <button @click="asyncAdd">async count++</button> <button @click="asyncReduce">async count--</button>
  </div>
</template>
<script>
import {ref,computed,onUpdated} from 'vue'
import {useStore,mapMutations,mapActions} from 'vuex'
export default {
  setup() {
    // 方式一
    const count = ref(null);
    const store = useStore();
    count.value = store.state.count
    onUpdated(()=>{
    count.value = store.state.count
    }) 
    return{
      count
    }
    
  },
 
  methods:{
    ...mapMutations(['addCount']),
    ...mapActions(['asyncAddCount']),
    add(){
      // this.$store.commit('addCount');
      // 方式二
      this.addCount()
    },
    reduce(){
      this.$store.commit('reduceCount');
    },
    asyncAdd(){
      // this.$store.dispatch('asyncAddCount')
      //方式二
      this.asyncAddCount()
    },
    asyncReduce(){
      this.$store.dispatch('asyncReduceCount')
    }
  }
}
</script>

ps: ゲッターとモジュールについては次号で取り上げます! シンプルじゃないですか！試してみましょう、友達！

vue3.0 で vuex を使用する