vuexの実装方法を詳しく解説（詳細チュートリアル）

この記事では主に簡単なvuexの実装方法を紹介しますので、参考にしてください。

まず、vuex を使用する理由を知る必要があります。親コンポーネントと子コンポーネント間の通信は、プロパティとカスタム イベントを使用して行うことができ、単純な非親コンポーネントと子コンポーネントの通信にはバス (空の Vue インスタンス) が使用されます。次に、vuex を使用して、複雑な非親子コンポーネント通信を解決します。

vuex の使い方を知っているだけでも問題ありません。ドキュメントを読めば誰でもコーディング方法を知ることができます。 vuex がどのように実装されているか知りたくないですか? ！

vuex のソースコードはさておき、まずは簡単な「vuex」の実装方法を考えてみましょう。ゲッター、ミューテーション、アクションなどは必要なく、状態だけが必要なのです。

非親子コンポーネント通信

実装する前に、公式Webサイトから例を借りて、バスの実装を検討する必要があります:

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

当時を思い返すと、どこに配置すればよいのかわかりませんでしたインスタンス化されたバスを、最終的にウィンドウの下に配置する以外に選択肢はありませんでした。常に window.bus が使用されます。これは問題ありませんが、それでもグローバル スコープに影響します。

ある日突然、vue のルート インスタンスの下にマウントできることを発見しました (これからは window.bus に別れを告げましょう)。それで、次のことを思いつきました:

var app = new Vue({
 el: '#app',
 bus: bus
})

// 使用 bus
app.$options.bus

// or
this.$root.$options.bus

その後、バスは実際には単なるバスではないことを発見しました。コミュニケーションが取れるイベントに。実際、バスはデータが応答する Vue インスタンスです。たとえば、アプリのルート インスタンスの下に 2 つの非親子コンポーネントがあり、どちらもバス データを使用するため、同期的に応答します。

var bus = new Vue({
 data: {
  count: 0
 }
})

上記では、サブコンポーネント a が count を変更します。サブコンポーネント b が count を使用する場合、最新の count 値に応答できます。

ここまで言っても、まだ発見していませんか？これは単に非コンポーネント間の通信、vuex の状態を実現するだけではないでしょうか。 ！

バスのカプセル化

はい、今バスをカプセル化します。これは最も単純な「vuex」です（状態の関数のみを使用します）。まず、2 つの非親子コンポーネント childA および childB を持つルート インスタンス アプリを作成します。

html コードは次のように実装されます。

<p id="app">
 <child-a></child-a>
 <child-b></child-b>
</p>

非親子コンポーネントの実装

次に、2 つの非親子コンポーネントと app の実装があり、子コンポーネントはすべてバス カウントを使用します。ここでは、store.state で表され、その後に vuex が続きます。 一貫性:

// 待实现
const store = new Store(Vue, {
 state: {
  count: 0
 }
})

// 子组件 a
const childA = {
 template: &#39;<button @click="handleClick">click me</button>&#39;,
 methods: {
  handleClick () {
   this.$store.state.count += 1
  }
 }
}

// 子组件 b
const childB = {
 template: &#39;<p>count: {{ count }}</p>&#39;,
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

new Vue({
 el: &#39;#app&#39;,
 components: {
  &#39;child-a&#39;: childA,
  &#39;child-b&#39;: childB
 },
 store: store
})

コード内に実装される Store があることを確認してください。必須パラメータ。ここで Vue.use() を使用するのが面倒なので、使用するパラメータとして Vue を直接渡します。2 番目のパラメータは、vuex を使用して渡したパラメータと一致します。

Store の実装

次のステップは Store の実装です。これは 2 段階の実装です:

1. バス インスタンスを作成します。

2. すべてのサブコンポーネントが this.$store にアクセスできるようにします。

最初のステップはすでに上で説明しましたが、2 番目のステップは主にグローバル ミキシングに Vue.mixin を使用しますが、必要なのはストアのあるルート インスタンスを見つけて Vue プロトタイプのストアに割り当てることだけです。これにより、ルート インスタンス アプリはミックスインの書き込みを特殊化する必要がなくなります。

class Store {
 constructor (Vue, options) {
  var bus = new Vue({
   data: {
    state: options.state
   }
  })

  this.install(Vue, bus)
 }
 
 install (Vue, bus) {
  Vue.mixin({
   beforeCreate () {
    if (this.$options.store) {
     Vue.prototype.$store = bus
    }
   }
  })
 }
}

によって実装された Store は単純な "vuex" であり、vuex の状態を持ち、親コンポーネントと子コンポーネント以外のコンポーネント間の単純な通信を可能にするのに十分です。

Store のコンストラクターでバス インスタンスを作成し、それを Vue のプロトタイプに注入して、すべてのコンポーネントがバス インスタンスである this.$store にアクセスできるようにします。 this.$store は Vue インスタンスであるため、this.$store.state.count にアクセスすると実際にデータにアクセスし、それによって親以外のコンポーネントと子コンポーネントの間で応答の同期が実現されます。すべてのソースコードはここから入手できます。

上記は私があなたのためにまとめたものです。

関連記事:

ノードアプリケーションでタイミング攻撃を使用する場合、どのようなセキュリティ脆弱性が存在しますか?

オブジェクトを渡すvueコンポーネントに一方向バインディングを実装するにはどうすればよいですか?

Vue コンポーネントで TypeScript を使用する方法 (詳細なチュートリアル)

以上がvuexの実装方法を詳しく解説（詳細チュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。