vuex2.0のモジュールインスタンスの詳細説明-jsチュートリアル-php.cn

vuex2.0のモジュールインスタンスの詳細説明

小云云

リリース： 2018-01-18 09:29:23

オリジナル

2644 人が閲覧しました

この記事は主に vuex2.0 のモジュールを紹介しています。編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

モジュールとは何ですか?

背景: Vue のステートは単一のステートツリー構造を使用し、必要なすべてのステートがステート内に配置されます。プロジェクトがより複雑な場合、ステートは非常に大きなオブジェクトになり、ストアオブジェクトも非常に大きくなります。大きくて管理が難しい。

モジュール: 各モジュールは独自の状態、突然変異、アクション、ゲッターを持つことができるため、構造が非常に明確で管理しやすくなります。

モジュールの使用方法?

一般構造

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})

ログイン後にコピー

モジュール内のデータ: ①内部状態、モジュール内の状態はローカル、つまりモジュールに対してプライベートです。例えば、car.jsモジュール状態のリストデータ、 this.$store.state.car.list を通じて取得する必要があります。 ② 内部ゲッター、ミューテーション、およびアクションは、引き続きグローバル名前空間に登録されます。これは、複数のモジュールが同時に同じミューテーションに応答できるようにするためです。 store.state.car.carGetter 結果は未定義ですが、this.$store.state.carGetter を通じて取得できます。

パラメータの受け渡し: getters====({state(ローカル状態),getters(グローバルゲッターオブジェクト),roosState(ルート状態)}); アクション====({state(ローカル状態),commit,roosState (ルート状態)}).

それを体験するには、vue –cli を通じて新しいプロジェクト vuemodule を作成します。vuex をインストールすることを忘れないでください。

1. src ディレクトリに新しいログインフォルダーを作成し、その中に新しいindex.jsを追加し、ログインモジュールのステータスを保存します。わかりやすくするために、すべての状態、アクション、ミューテーション、およびゲッターを、index.js ファイルのモジュールの下に置きます。

まずステータスを追加します: userName: “sam”

const state = {
  useName: "sam"
};
const mutations = {

};
const actions = {

};
const getters = {

};

// 不要忘记把state, mutations等暴露出去。
export default {
  state,
  mutations,
  actions,
  getters
}

ログイン後にコピー

2. src ディレクトリに新しい store.js を作成します。これは modules 属性を通じてログインモジュールを導入します。。

import Vue from "vue";
import Vuex from "Vuex";

Vue.use(Vuex);

// 引入login 模块
import login from "./login"

export default new Vuex.Store({
  // 通过modules属性引入login 模块。
  modules: {
    login: login
  }
})

ログイン後にコピー

3、main.jsにstoreを導入し、vueルートインスタンスに注入します。

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;

// 引入store
import store from "./store"

new Vue({
 el: &#39;#app&#39;,
 store, // 注入到根实例中。
 render: h => h(App)
})

ログイン後にコピー

4. app.vue の computed 属性を通じてログイン時の状態を取得します。ここで、モジュールがない場合は、ただし、モジュールが存在する場合、状態はログイン名前空間 (モジュール) に制限されるため、コンポーネント内では属性名の前にモジュール名 (名前空間) を追加する必要があります (this.$store.state.module 名)。プロパティ名が使用されています。ステータスは this.$store.state.login.userName

<template>
 <p id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
 </p>
</template>

<script>
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 }
}
</script>

ログイン後にコピー

コンポーネントから正常に取得されました。プロジェクトのディレクトリと表示は次のとおりです

4. これには、ディスパッチアクション、コミットミューテーション、状態を変更するミューテーションが含まれます。

まず、ログインフォルダーにchangeNameアクションとCHANGE_NAMEミューテーションを追加します。 index.js .

const mutations = {
  CHANGE_NAME (state, anotherName) {
    state.useName = anotherName;
  }
};

const actions = {
  changeName ({commit},anotherName) {
    commit("CHANGE_NAME", anotherName)
  }
};

ログイン後にコピー

app.vue にボタンを追加します: