vuex の使用を開始する手順の詳細な説明

今回は、vuex を始めるための手順について詳しく説明します。vuex を始めるための 注意点 とは何ですか? 実践的な事例を見てみましょう。

はじめに

これまでのプロジェクトでは、コンポーネント間の通信が必要な箇所が多かれ少なかれありましたが、さまざまな理由により、
event バスのコストが vuex のコストよりも高いため、技術的な選択 私は vuex を選択しましたが、理由がわかりません
vuex は難しいため、チームの一部の新参者は尻込みし始めました
今日は、vuex を証明するために簡単な 3 つのステップを使用します。とても簡単です。

これは純粋に個人的な経験です。不正確な点があることは避けられません。もし見つけた場合は、修正してください。

これは初心者レベルのチュートリアルです。初心者

ステップ 0

新しい vue プロジェクトを作成し、vuex をインストールします。クリックできる場合は、デフォルトでこれらのスキルを備えています。ステップ 1

任意の名前と位置で新しい .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 とあまり変わりません

このステップは実際には新しいストアを作成するためのものですが、まだ使用していません。まだプロジェクト内にあります

第2ステップ

上記のファイルをエントリーファイル

に導入し、新しいVue()に渡すパラメータを少し変更します

ファイルlocation/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: '<App/>'
})

ヒント: './store' からストアをインポートします。後ろのアドレスは、上で作成した新しいファイルの場所 (/src/store/index.js) です。

ここにはindex.jsがあるため、省略できます。

3番目のステップ

上記の2つのステップ実際に vuex の基本構成が完了しました。次のステップは

ファイル location/src/main.js (これも vue-cli.vue によって生成されたアプリです。ここではデモンストレーションの便宜上、冗長な部分を削除しています) code)

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit('updateName')
 }
 }
}
</script>

これは非常に普通の vue ファイルです。違いは、ストア内の「データ」を取得するために計算された属性を使用する必要があることです

そして、データを変更したい場合は、もう必要はありません。 this.xxx = xxx を使用し、 this.$store.commit('updateName') に変更します

概要

上記の例でこれを行う意味は何なのかと思われるかもしれませんが、なぜ vue のデータを直接使用しないのでしょうか?とメソッド?

上記の例は、vuex の使用方法を簡単に説明するためのもので、いくつかのプロセスを簡素化しています。次のようなページがあると想像してください:

合計 10 層のコンポーネントがネストされています。サブコンポーネント内にも 10 層のコンポーネントがあります) サブサブコンポーネントがあり、サブサブコンポーネントの下にはサブサブサブコンポーネントがあり、以下同様に 10 レベルになります)

その後、最後の層コンポーネントのデータが変更された場合、最初の層コンポーネントに通知したい場合は、 this.$store.commit() で

を実行し、最も外側のコンポーネントの計算された属性を使用して対応する値を取得するだけです。リアルタイムの更新を実現できます。レイヤーごとに $emit を実行する必要はありません

この記事の事例を読んだことがあるかと思います。この方法をマスターした後は、php 中国語に関する他の関連記事にも注目してください。さらにエキサイティングなコンテンツを提供するウェブサイトです。

推奨読書:

v-model を使用して vue ポップアップ コンポーネントを実装することを約束する方法

Vue を使用して axios プラグインを二次カプセル化する方法

以上がvuex の使用を開始する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。