vuex stateとmapStateの使い方

今回は、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中文网其它相关文章！

推荐阅读：

怎样使用Vue实现倒计时按钮

怎样利用Vue写一个双向数据绑定

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