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() に渡されるパラメーターを少し変更します。
import Vue from 'vue' import App from './App' import vuexStore from './store' // 新增 new Vue({ el: '#app', store:vuexStore // 新增 components: { App }, template: '<App/>' })
ここに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 './components/HelloWorld' export default { computed:{ getName(){ return this.$store.state.name } }, methods:{ changeName () { this.$store.commit('updateName') } } } </script>
また、必要に応じて。データを変更するには、this.xxx = xxx を使用しなくなり、this.$store.commit('updateName') に変更します
概要上記の例にはどのような意味があるのかと思うかもしれません。 vue のデータとメソッドをそのまま使用してはどうでしょうか? 上の例は、vuex の使用方法を簡単に説明するためのものであり、次のようなページがあると想像してください:
10 個のコンポーネントがネストされています。合計で (つまり、サブコンポーネントの中にサブサブコンポーネントがあり、サブサブコンポーネントの下にサブサブコンポーネントがあり、以下同様に 10 個のレイヤーがあります)
そして、最後のレイヤーコンポーネントにはデータが変更されました。最初の層のコンポーネントに通知したい場合は、最下層のコンポーネント
元々は最後にゲッター、アクション+ディスパッチ、モジュール化などを拡張する必要がありました。この称号にふさわしいものになるように。
関連する推奨事項:
vscodeでvueのコーディングスタイルを統一する方法の紹介
以上がvuex の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。