今回は、vuex stateとmapStateの使い方と、vuex stateとmapStateを使用する際の注意点について説明します。以下は実際的なケースです。
まず、vue cli を使用して独自の vue プロジェクトを構築します
1.npm i -g vue-cli
2.vue init webpack sell (sell はプロジェクト名です)
3. (このプロセスでは) を最後まで入力します。 vue-router、es6 構文チェックなどの依存パッケージをインストールするかどうかを尋ねられます。個人的な習慣や趣味に基づいて Y/N を選択してください)
4.npm i (これはインストール プロジェクトの依存パッケージです) )
5. npm run dev (vue プロジェクトを開始します) この時点で、ページに vue ロゴが表示されていれば、vue プロジェクトの基本的な構築が完了したことを意味します。その後、不要なコンポーネントを削除できます
6. Webpack sell はデフォルトでは vuex をインストールしないので、vuex をインストールする必要があります。コマンドラインで ctrl+c を 2 回押してサーバーを終了し、npm install vuex –save で vuex をインストールします。
7.あなたの src ディレクトリに helloVuex という名前を付けましょう (この名前はあなたがやりたいことを何でもして幸せになれます) このコンポーネントは主にメインコンテナとして使用され、コンテンツを表示するだけです
8. 次に、好きな名前の新しいコンポーネントを作成します (私はそうします)ここでは display コンポーネントと呼びます) で状態を受け入れるため
9 次に、src ディレクトリに store という新しいフォルダーを作成し、そのストアの下に test.js という js ファイルを作成します (ここでのストアは私たちのフロントエンド データ ウェアハウス)、状態管理には vuex を使用します。Store は vuex のコアであるため、store という名前を付け、src ディレクトリに新しい store ファイルを作成し、store ディレクトリに test.js ファイルを作成します。 )。 vuex を使用する前に、それを使用するように vue に指示する必要があることがわかります。Vue.use(Vuex); ここで管理する変数の数は 1 つだけなので、ストア オブジェクトを作成するときにパラメーターを コンストラクター に渡します。 state の下にカウントは 1 つだけあり、0 に初期化されます。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } export default store
これで、すべてのステータス、つまり変数が test.js に配置されました。では、コンポーネントはどのようにしてステータス変更値を取得できるでしょうか?ここで実行するステップは 2 つあります
1. Vue は、ストア オブジェクトをルート インスタンスに注入する注入メカニズムを提供します。 vue のルート インスタンスは新しい Vue コンストラクターであり、すべてのサブコンポーネントで this.$store がストア オブジェクトを指します。 test.jsではストアをエクスポートしており、new Vue()がmain.js内に公開されているので、main.jsにストアを直接導入して注入することができます。
import Vue from 'vue' import App from './App' import router from './router' import store from './store/test' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
2. 子コンポーネントで、計算された属性を使用します。計算された属性は、依存関係に基づいて自動的に更新されます。したがって、ストア内の状態が変化する限り、自動的に変化します。 display.vue に次の変更を加えます。サブコンポーネントの This.$store はストア オブジェクトを指します。 test.js のカウントを 8 に変更すると、ページ上では 8 になります。
<template> <p> <h3>Count is {{count}}</h3> </p> </template> <script> export default { computed: { count () { return this.$store.state.count } } } </script>
3. ステータス値は計算された属性を通じて取得できますが、コンポーネント内の各属性 (カウントなど) は関数です。10 個ある場合、これを返すには 10 個の関数を記述する必要があります。 . $store.state、あまり便利ではありません。 Vue は、状態をコンポーネントに直接マップする、mapState 関数を提供します。
もちろん、使用する前にmapStateを導入する必要があります。オブジェクトまたは配列を受け入れる 2 つの方法で使用できます。まだdisplay.vueコンポーネントの下にあります。
オブジェクトの使用法は次のとおりです:
<script> import {mapState} from "vuex"; // 引入mapState export default { // 下面这两种写法都可以 computed: mapState({ count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁 count: 'count' // 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count, }) } </script>
配列メソッドは次のとおりです:
<script> import {mapState} from "vuex"; export default { computed: mapState([ // 数组 "count" ]) } </script>
4, 最後に質問が 1 つあります。コンポーネント内にも計算された属性がある場合はどうなりますか?それはmapStateに属しません。次に、mapState 関数で生成されたオブジェクトをオブジェクト セグメンテーションを使用して 1 つずつ分割します。最初と同様に、計算された属性を 1 つずつ列挙します。10 個の属性がある場合、10 個の関数を記述します。 es6 の
... は分割に使用されますが、配列のみを分割できます。 ECMAScript stage-3 でオブジェクトを分割できるため、この時点では babel-stage-3 も使用されます。インストールが完了したら、忘れずに追加してください。 babel in babelrc 設定ファイル で、stage-3、
と記述しないと、常にエラーが報告されます。ページに p タグを追加して、コンポーネントの計算の習熟度を示します
babelrc
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-3" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-3"], "plugins": ["istanbul"] } } }
display.vue コンポーネントの変更後
<template> <p> <h3>Count is {{count}}</h3> <p>组件自己的内部计算属性 {{ localComputed }}</p> </p> </template> <script> import {mapState} from "vuex"; export default { computed: { localComputed () { return this.count + 10; }, ...mapState({ count: "count" }) } } </script>
効果を確認するには、test.js の state.count を 10 に変更します
VuexでのmapStateの使い方を見てみましょう
今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了。真是天雷滚滚~~~~~~
index.js
import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './action' import getters from './getters' Vue.use(Vuex) const state = { userInfo: { phone: 111 }, //用户信息 orderList: [{ orderno: '1111' }], //订单列表 orderDetail: null, //订单产品详情 login: false, //是否登录 } export default new Vuex.Store({ state, getters, actions, mutations, }) computed: { ...mapState([ 'orderList', 'login' ]), }, mounted(){ console.log(typeof orderList); ==>undefind console.log(typeof this.orderList)==>object }
mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要,这个映射直接映射到当前Vue的this对象上。
所以通过this都能将这些对象点出来,同理,mapActions, mapMutations都是一样的道理。牢记~~~
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上がvuex stateとmapStateの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。