vuexは実は超簡単で、3歩しかかかりません

前言
これまでのいくつかのプロジェクトでは、コンポーネント間の通信が必要な場所に多少遭遇したが、様々な理由でevent busのコストがvuexよりも高いため、技術的な選択型でvuexを選んだが、なぜかチームの新人がvuexを聞くと、萎縮し始めた.vuexは難しいからだ.本当に難しいですか?今日は簡単な3つのステップでvuexがどれだけ簡単かを証明します.
純粋に個人の経験で、どうしても正しくないところがあって、もし発見があれば、指摘を歓迎します!
初心者向けの入門チュートリアル、入門チュートリアル、入門チュートリアルです
ステップ0
新しいvueプロジェクトを作成し、vuexをインストールします.ここではあまり紹介しません.ポイントを入れることができます.デフォルトでは、これらのスキルを備えています.
最初のステップ.jsファイルを新規作成し、名前の位置は任意で、慣例に従って、/src/storeディレクトリの下で(なければ自分で新規作成することをお勧めします) /src/store/index.js

//   vue   vuex
import Vue from 'vue'
import Vuex from 'vuex'

//     use  ,    ,    
Vue.use(Vuex)

//         Store    
export default new Vuex.Store({
  //    vue   data
  state: {
    name: 'oldName'
  },
  //    vue    mothods(    )
  mutations: {
    updateName (state) {
      state.name = 'newName'
    }
  }
})

コードは少し多いように見えますが、よく知っているように見えますか?普通のvueと大差ないですか.このステップは実際にstoreを新規作成することですが、私たちはまだプロジェクトで使用していません.
ステップ2
エントリファイルに上記のファイルを導入し、new Vue()に渡されるパラメータを少し変更します.新しい行の後ろにコメントがあります. /src/main.js(vue-cli自動生成の入口、足場を使わないことができれば、私の説明は必要ありません)

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

new Vue({
  el: '#app',
  store:vuexStore                 //   
  components: { App },
  template: ''
})

Tip: import store from './store'の後ろの住所は、indexですので、上に新しいファイルを作成した場所です(/src/store/index.js).jsは省略することができる.
ステップ3
以上の2つのステップは、実はvuexの基本的な構成が完了しており、次は使用します. /src/main.js(同じvue-cliで生成されたapp.vueですが、ここではプレゼンテーションを容易にするために余分なコードを削除します)

import HelloWorld from './components/HelloWorld'

export default {
  computed:{
    getName(){
      return this.$store.state.name
    }
  },
  methods:{
    changeName () {
      this.$store.commit('updateName')
    }
  }
}

ここは普通のvueファイルです.違いはここでcomputedプロパティでstore "data"を取得する必要があります.
また、データを変更するには、this.xxx = xxxでthis.$に変更しません.store.commit('updateName')
まとめ
前例のような意味は何なのか、なぜvueのdataとmethodsを直接使わないのかと思うかもしれません.
上記の例はvuexの使用方法を簡単に説明するためだけなので、いくつかの流れを簡略化して、考えてみてください.もしあなたがこのようなページを持っていたら、全部で10層のコンポーネント(つまり、サブコンポーネントの中にサブコンポーネントがあり、サブコンポーネントの下にサブサブコンポーネントがあり、このように10層を押します)をネストして、最後の層のコンポーネントのデータが変更されました.最初の層のコンポーネントに通知するには、最下層のコンポーネントのthis.$store.commit()で、そして最外層のコンポーネントにcomputed属性で対応する値を取得することで、リアルタイムで更新することができる.$emitを重ねる必要はありません.
最後に
最後にgetter、action+dispatch、モジュール化などを拡張したいと思っていましたが、このタイトルに合うように、vuexは実は超簡単で、この3歩を飲み終わって、まだ3歩あります.
本文が役に立つと思ったら、本文のgithubにstarを追加してください.ありがとうございます.
また、githubにはフロントエンドに関するチュートリアルやコンポーネントがあります.興味のある子供靴は見てもいいです.あなたたちのサポートが私の最大の原動力です.