Vuex、Vueの状態管理ツール

VuexはVueの状態管理ツールです

Vuexは、Vue.jsアプリケーション用に特別に開発された状態管理モードです。

前書き

すべてのVuexアプリケーションの中核はストアです。「ストア」は基本的に、アプリケーションのほとんどの状態を含むコンテナーです。

Vuexは、次の2つの点で純粋なグローバルオブジェクトとは異なります。

Vuexの状態ストレージはレスポンシブです。Vueコンポーネントがストアから状態を読み取るときに、ストア内の状態が変化すると、対応するコンポーネントがそれに応じて効率的に更新されます。
ストア内の状態を直接変更することはできません。ミューテーションで定義された状態は、Vuexのミューテーションで定義されたメソッドを呼び出して変更する必要があります。これにより、すべての状態の変化を知ることができます。

その存在の意味は、Vueのすべてのコンポーネントがデータを通信できるようにすることです

使用環境

vueの複数のコンポーネントで同じ変数を使用し、1つのコンポーネントの変数が他のコンポーネントの変数を変更する場合は、今回も変更する必要があります。今回は、Vuexを使用してこの変数を格納できます。

Vuexの5つのコア

state：ストアのさまざまな状態を格納します
mutation：ミューテーションメソッドを介してのみストアの状態を変更します
アクション：非同期操作メソッド
モジュール：モジュラー
ゲッター：属性の計算と同等
で、一部の値の使用を除外しますstate

Vuexの使用

保存と検索

const store = new Vuex.Store({
    //存放状态信息
    state: {
        counter:1000,
    },
}
 //拿到counter的值
<h2>{
   
   {$store.state.counter}}</h2>

同期変更

mutations: {
        //方法,改state提交mutation
        //mutation响应规则
        //mutation无法进行异步更新
        increment(state) {
            state.counter++

        },
}  
  //在方法中提交mutation
methods: {
    addition(){
      //提交store的信息
      this.$store.commit('increment')
      }
}

非同期変更

const store = new Vuex.Store({
    //存放状态信息
    state: {
        Info: {
            name : 'kobe',
            age:20,
            height : 1.98
       }
    },
mutations: {
        increment(state) {
            state.counter++
        },
}  
actions:{
        //进行异步操作
        //context上下文
        //异步可以用setTimeout
        aupdateInfo(context){
            setTimeout(() =>{
                context.commit('updateInfo')
            },1000)
        }
}
    methods: {
        updateInfo() {
      // this.$store.commit('updateInfo')
      // dispatch：含有异步操作，例如向后台提交数据，写法:this.$store.dispatch('action方法名',值)
//commit：同步操作，写法：this.$store.commit('mutations方法名',值)
      this.$store.dispatch('aupdateInfo')
      },
  }
}

実際、ディスパッチを使用して、ミューテーションで定義されたメソッドを再度呼び出します。

モジュールの使用

// 在大量使用Vuex时为了避免代码过于臃肿 为了方便后期维护和避免命名冲突
// 在modules中划分，让每一个分离出去的State都有自己的getters，mutations，actions等
modules :{
        a:modulesA
    }
const modulesA = {
    state : {
        name : 'zhangsan'
    }
    mutation： {}，
    getter： {}

}

Vuexのインストールと構成

Vuexをインストールする

npm i vuex --save

Vuexの引用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

倉庫店を作成する

 //创建一个 store
 const store = new Vuex.Store({});

または

Vueスキャフォールディングを作成するときにVuexを選択して、Vuexテンプレートが付属するようにしました

VuexはVueの状態管理ツールです

前書き

使用環境

Vuexの5つのコア

Vuexの使用

Vuexのインストールと構成

おすすめ