簡単な3ステップvuex入門

前言
これまでのいくつかのプロジェクトでは、コンポーネント間の通信が必要な場所に多少遭遇したが、様々な理由で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の進歩知識点の強化
ここで紹介するソースを共有します.https://github.com/noahlam/articles