vuex の紹介

3 つの簡単なステップで誰でも VUEX をすぐに始められます。この記事では、VUEX の最も基本的な機能と関連する知識のポイントも紹介します。

はじめに

これまでのプロジェクトでは、コンポーネント間の通信が必要な箇所が多かれ少なかれありましたが、さまざまな理由により、
event バスのコストが 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 番目のステップは入り口にあり、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: &#39;<App/>&#39;
})

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

ここにindex.jsがあるので、省略できます

3番目のステップ

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

ファイルの場所/src/main .js (vue-cli によって生成された app.vue も使用します。デモンストレーションの便宜のため) を使用します。 、冗長なコードを削除しました)

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>

<script>
import HelloWorld from &#39;./components/HelloWorld&#39;

export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit(&#39;updateName&#39;)
 }
 }
}
</script>

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

また、必要に応じて。データを変更するには、this.xxx = xxx を使用しなくなり、this.$store.commit('updateName') に変更します

概要

上記の例にはどのような意味があるのか​​と思うかもしれません。 vue のデータとメソッドをそのまま使用してはどうでしょうか?

上の例は、vuex の使用方法を簡単に説明するためのものであり、次のようなページがあると想像してください:

10 個のコンポーネントがネストされています。合計で (つまり、サブコンポーネントの中にサブサブコンポーネントがあり、サブサブコンポーネントの下にサブサブコンポーネントがあり、以下同様に 10 個のレイヤーがあります)
そして、最後のレイヤーコンポーネントにはデータが変更されました。最初の層のコンポーネントに通知したい場合は、最下層のコンポーネント

で this.$store.commit() を実行し、最も外側のコンポーネントの計算された属性を使用して取得するだけです。対応する値をリアルタイム更新に追加します。

最後に

元々は最後にゲッター、アクション+ディスパッチ、モジュール化などを拡張する必要がありました。この称号にふさわしいものになるように。

VUEX の高度な知識のポイントをまとめます

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

VUEでのv-bindの使い方の紹介

vscodeでvueのコーディングスタイルを統一する方法の紹介

以上がvuex の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。