vuex再入門-基礎用法

前言
実は私はすでにvuexを使ったことがありますが、最近またしばらく使っていないので、結局今日はまた疎遠になりました.そのため、また入門することにしました.
まずvuexは何ですか?vuexはvueのステータスマネージャです.ステータスマネージャとは?ステータスマネージャは、小さなフロントエンドデータベースとして理解できます.各ページ間のデータ共有を実現します.
では、なぜsessionStorgeとlocalStorageでデータを共有しないのでしょうか.ここではステータス更新にかかわるからです.aページでデータを更新した後、vuexを使用すると、bページデータが自動的に更新されます.sessionStorageまたはlocalStorageを使用すると、このような効果はありません.
1.vuexの使用
1.1 vuexのインストール
vuexとvueは別々で、vuexを使用するにはインストールが必要で、npmもyarnも使用できます.コードは次のとおりです.

npm install vuex -S
  
yarn add vuex

1.2 vuex参照
上記の手順でvuexがインストールされています.今はvuexを使用するときです.簡単に、vueのsrcディレクトリの下にstoreフォルダを新規、storeフォルダの下にindexを新規作成します.jsファイル.実は他の場所で建ててもいいですが、これは規範に合わないので、誰かがコードを変更したとき、storeがどこに置かれているか見つかりません.ディレクトリ構造は次のとおりです.

|-src
  |- App.vue
  |- assets
  |  |-logo.png
  |-components
  |  |-HelloWorld.vue
  |-main.js
  |-store
  |  |-index.js

1.3 vuexの導入
新しいindexでjsにはvueとvuexが導入され、vueを使用してvuexコンポーネントが呼び出され、indexにvuexのプログラムを書くことができます.

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

簡単なvuexプログラムを書きます.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }})
  
export default store

このプログラムでは、storeでフィールドcountを定義し、初期値は0です.またincrementを呼び出すたびにcount値が1増加するメソッドincrementも定義した.
1.4 vuexのデータの使用
1.4.1注入store
vuexのデータを簡単に使用するために、storeをvueに追加します.これにより、後でどこでもthis.$storeはvuexにアクセスしました.
修正main.js,new Vueのコンストラクション関数にstoreを加える

import Vue from 'vue'
import App from './App.vue'

//   store
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

1,4,2 stroeを使用
コンポーネントhelloworldでstore(vuex)のデータを使用するとします.これを使用できます.store.state.フィールド名を使用してstoreに格納されているデータを取得します.storeのデータを使用するにも、「vueを置くcomputedプロパティ」が必要です.createdなどの他の場所に置いたり、dataオブジェクトに対応するプロパティに直接値を付けたりします.しかし、storeのデータが更新されると、ページデータが自動的に更新されないという問題があります.

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: 'hello world'
    }
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    addCount() {
      this.$store.commit('increment')
      this.$store.commit('increment')
      console.log('this.$store.state.count:', this.$store.state.count);
    }
  },
}

上記のプログラムが初期のとき、ページには「動物園の独身犬の数は:0」と表示されています.「カップルを解散する」ボタンをクリックすると、「動物園の独身犬の数は:」になります.
countをdataオブジェクトに置くと、例えばjsを次のように変更します.「カップルを解散」ボタンをクリックするとstoreのcount値は変わりますが、ページ上の「動物園の独身犬の数」は変わりません.

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: 'hello world',
      count: this.$store.state.count
    }
  },
  methods: {
    addCount() {
      this.$store.commit('increment')
      this.$store.commit('increment')
      console.log('this.$store.state.count:', this.$store.state.count);
    }
  },
}

1.5広告を挿入する
vue-cli 3を使用して開発する場合、eslintの制限が厳しいため、コンパイルが通らない場合があります.パッケージを変更できます.jsonのeslintのrules.
例えば、私のプロジェクトでは、eslintがconsoleを書くことができないことを制限しており、開発時に不便でした.私はpackageにいます.jsonではno-consoleを0に変更し,この制限を取り除いた.

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

以上がvuexの簡単な入門ですが、以下ではvuexについてもっと詳しく説明します.
2.vuexの組成
vuexは実はとても简単で、私は以前vuexを学ぶ时、感じはとても深くて、今见たところやはり简単です.vuexは4つの部分だけで構成されていますが、この4つの部分はそれぞれ異なる機能を担当しており、ゲーム中の4つの異なるキャラクターに相当するでしょう.4つは次のとおりです.

stateデータを格納するための

mutationは、データ

を同期的に変更する.

gettersは、データのフィルタリングおよび計算に使用され、計算後のデータ

を返す.

actionデータ

を非同期で修正する.
vuexは単一のステータスツリーであり、vueプログラム全体にvuexインスタンスが1つしかない.単一ステータスツリーは、コードの実行状況を容易に特定できます.
2.1 state
storeオブジェクトのデータを取得するのは一般的にthis.$store.state.keyが取得しました.たとえばcountプロパティを取得し、このように取得します.

this.$store.state.count

2.1.1 mapState関数
私たちはstateの値を取得します.一般的にcomputed属性に置かれています.stateに多くの値がある場合は、computedに計算属性をたくさん書きます.コード量を説明するために、vuexはmapState関数を提供します.
プログラムを次のように変更することができます.ここではmapStateが導入されており、computedではmapStateも使用されています

import { mapState } from 'vuex'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      name: 'hello world'
    }
  },
  computed: mapState([
    'count'
  ]),
  methods: {
    addCount() {
      this.$store.commit('increment')
      this.$store.commit('increment')
      console.log('this.$store.state.count:', this.$store.state.count);
    }
  },
}

実現した機能は以前と同じです.

computed: mapState([
   'count'
])
//         
computed: {
  count() {
      return this.$store.state.count
  }
}

mapStateを使用するより簡単な方法は、オブジェクト展開子を使用することです....

  computed: {
    ...mapState([
      'count'
    ])
  },

名前を変更する場合は、mapStateのパラメータをオブジェクトフォーマットに変更できます.

  computed: {
    ...mapState({
      count2: 'count'
    })
  },

2.2 Getters
storeのstateの値を計算する必要がある場合があります.1つのコンポーネントまたは2つのコンポーネントであれば、属性をcomputedに直接置くことができます.しかし、複数のコンポーネントが同じ計算を行う必要がある場合.私たちのコードは冗長になります.解決策はstoreでstateの値を計算することです.そのためstoreのgettersプロパティが使用されます.
私たちのケースではcountは独身犬の数を表し、初期値は0で、この世界には単生犬はいません.しかし、ある日突然vueにプログラマーコンポーネント(It.vue)を追加します.プログラマーというグループは、単生犬が特に多く、平均値countより10個多いと仮定すると、storeでitDogsの属性を定義することができます.この属性はcount値より10個多いです.
storeコードの変更は次のとおりです.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  getters: {
    itDogs: state => {
      return state.count + 10
    }
  }
})

export default store

どうすればいいのでしょうか?
gettersのデータを取得するには、プロパティからアクセスするか、メソッドからアクセスできます.
2.2.1属性によるアクセス
プロパティ・アクセス・コードは次のとおりです:this.$store.getters.健名、このニーズの中で:

this.$store.getters.itDogs

It.vueで取得したitDogsコードは次のとおりです.

computed: {
    itDogs: function () {
      return this.$store.getters.itDogs
    }
 }

2.2.2メソッドによるアクセス
メソッドでアクセスするには、gettersのプロパティは、値を直接返すのではなく、定義時に関数を返さなければなりません.
私たちのニーズが変わったと仮定すると、プログラマーの世界では、異なる言語を使う独身犬の数が違います.例えばjsを使うのは平均独身犬の数に10を加え、javaを使うのは平均に100を加えることです
では、gettersにitDogsと書いてある関数を作成し、異なる言語に基づいて異なる値を入力し、対応する結果を返すことができます.(もちろん他の方法でも)
storeは次のように変更されました.

getters: {
    itDogs: state => (num) => {
        return state.count + num
    }
}

取得方法は次のとおりです.

  computed: {
    itDogs: function () {
      return this.$store.getters.itDogs(100)
    }
  },

**gettersの値にプロパティメソッドでアクセスします.この値はキャッシュされます.次回必要に応じてキャッシュから直接取り出すことができます.メソッドでアクセスすると、毎回関数を呼び出して再計算します
2.2.3他のgetterへのアクセス
getterは、他のgetterを2番目のパラメータとして受け入れることもできます.例えば、男性プログラマーの独身犬の数は、一般的なプログラマーの独身犬の数に100を加える.

  getters: {
    itDogs: state => (num) => {
      return state.count
    },
    manItDogs: (state, getters) => {
      return getters.itDogs + 100
    }
  }

2.2.4 mapGetters関数
mapGetters関数はstoreのgetterをローカル計算プロパティにマッピングします.たとえば、getterは次のようになります.

  getters: {
    itDogs: state => {
      return state.count
    },
    manItDogs: (state, getters) => {
      return getters.itDogs + 100
    }
  }

取得したコードは次のように変更されました.

  computed: {
    ...mapGetters([
      'itDogs',
      'manItDogs'
    ])
  },

名前を変更する場合は、mapGettersのパラメータをオブジェクトに変更できます.

  computed: {
    ...mapGetters({
      itDogs2: 'itDogs',
      manItDogs2: 'manItDogs'
    })
  },

2.3 Mutation
Vuexのstoreのデータを変更する唯一の方法はmutationをコミットすることです.コールを呼び出すには、storeにイベントを登録する必要があります.mutationで定義された関数は同期されている必要があります.
例えば私たちが前に定義した

  mutations: {
    increment(state) {
      state.count++
    }
  },

カウント数に1を追加したいので呼び出します

this.$store.commit('increment')

2.3.1伝参
「カップルを解散する」というボタンを定義しました.このボタンをクリックするとcountの数を2に増やし、私たちは前にこのように呼び出しました.

  methods: {
    addCount() {
      this.$store.commit('increment')
      this.$store.commit('increment')
    }
  },

私たちはcommitを2回呼び出しました.これはおかしいですが、mutationsの関数は参照できます.increment関数を変更します.

  mutations: {
    increment(state, num) {
      state.count += num
    }
  },

state.countは1を追加するのではなくnumを追加します.これでいいです.3 pでも百人斬りでも、私たちは解散することができます.
呼び出し関数の変更は次のとおりです.

  methods: {
    addCount() {
      this.$store.commit('increment', 2)
    }
  },

2.3.2オブジェクトパラメータ
時々パラメータがたくさんあるのでどうしますか?2番目のパラメータをオブジェクトに変更できます.
incrementの変更

  mutations: {
    increment(state, obj) {
      state.count += obj.num
    }
  },

呼び出しの変更

  methods: {
    addCount() {
      this.$store.commit('increment', {
        num: 2
      })
    }
  },

2.3.3 mapMutations
mapMutationsはstoreのmutationのメソッドをvueコンポーネントのmethodsのメソッドにマッピングすることができる

  methods: {
    ...mapMutations([
      'increment'
    ])
  },

これにより,コンポーネントのincrementメソッドを呼び出すことはstroeにおけるmutationのincrementメソッドを呼び出すことに相当する.
次のように呼び出されます.

2.4 Action
Actionはmutationと似ていますが、次のような違いがあります.

Actionは、ステータスを直接変更するのではなく、mutationをコミットします.

アクションは、任意の非同期動作

を含むことができる.
簡単なactionは次の通りです.

 actions: {
    increment: (context, obj) => {
      setTimeout(() => {
        context.commit('increment', obj)
      }, 5000);

    }
  }

Action関数はstoreインスタンスと同じメソッドと属性を持つcontextオブジェクトを受け入れるのでcontextを呼び出すことができます.commitはmutationをコミットするかcontextを通過する.stateとcontext.gettersはstateとgettersを取得します
アクションを呼び出すにはどうすればいいですか?dispatchを使用して呼び出すことができます

this.$store.dispatch('increment')

完全なコード:

  methods: {
    increment: function () {
      this.$store.dispatch('increment', { num: 2 })
    }
  },

Actions関数はmutation関数と同様にパラメータを伝達することができる.
2.4.1 mapActions
mapActionsはactionのメソッドをvueインスタンスmethodsメソッドにマッピングします.

  methods: {
    ...mapActions([
      'increment'
    ])
  },

よびだし

5        

2.4.2複数アクションの組合せ
store.dispatchは、トリガされたactionの処理関数が返すPromiseを処理する、store.dispatchはPromiseを返します
私たちのactionを次のように仮定します.

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

コンポーネントでは次のように処理できます.

store.dispatch('actionA').then(() => {
  // ...
})

別のアクションでは、このように呼び出すことができます.

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

まとめ:以上のvuexの基本的な使い方はすべて話し終わって、以上の知識点は基本的に私たちの仕事の中で直面している問題を解決することができます.しかしvuexにはもっと深い使い方があります.次の節でお話しします.