vuex state+mapState実践プロジェクトの分析-jsチュートリアル-php.cn

vuex state+mapState実践プロジェクトの分析

php中世界最好的语言

リリース： 2018-06-07 11:40:09

オリジナル

1738 人が閲覧しました

今回は、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. 次に、好きな名前の新しいコンポーネントを作成します (私はそうします)ここでは表示コンポーネントと呼びます) で状態を受け入れます
9. 次に、src ディレクトリに store という名前の新しいフォルダーを作成し、test.js という名前のストアの下に js ファイルを作成します (ここでのストアはフロントです)。状態管理には vuex を使用します。Store は vuex のコアであるため、store という名前を付けます。src ディレクトリに新しい store ファイルを作成し、store ディレクトリに新しい test.js ファイルを作成します。。 vuex を使用する前に、vue にそれを使用するように指示する必要があることがわかります。Vue.use(Vuex); ここで管理する変数の数は 1 つだけなので、ストアオブジェクトを作成するときに、パラメーターをコンストラクターに渡すだけです。状態で 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对象上。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！