ホームページ > 記事 > ウェブフロントエンド > vuex2.0modulesの詳細説明

vuex2.0modulesの詳細説明

小云云オリジナル: 2018-01-16 13:05:342275ブラウズ

この記事では主に 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 にボタンを追加します: bb9345e55eb71822850ff156dfde57c8 をクリックすると、コンポーネントでアクションをディスパッチします。

モジュールでは、状態はモジュールの名前空間に制限されており、アクセスするには名前空間が必要です。ただし、アクション、ミューテーション、および実際のゲッターは、デフォルトでは、グローバル名前空間に登録されます。いわゆるグローバル名前空間への登録は、実際には、モジュールを使用しない元のモジュールと同じようにアクセスすることを意味します。時代も同じだ。たとえば、モジュールがなかったときは this.$store.dispatch("actions") でしたが、モジュールが存在するようになったので、アクションもモジュールの下に書き込まれます (changeName はログインディレクトリの Index.js に書き込まれます)。 this.$store.dispatch(“changeName”) のように記述することもできます。コンポーネント内のゲッターも this.$store.getters.module 内のゲッターを通じて取得されます。

<template>
 <p id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
  <!-- 添加按钮 -->
  <p>
   <button @click="changeName"> change to json</button>
  </p>
 </p>
</template>

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

　　// 和没有modules的时候一样，同样的方式dispatch action
  changeName() {
   this.$store.dispatch("changeName", "Jason")
  }
 }
}

5、ローカルパラメータ

ディスパッチアクションとコミットミューテーションはグローバルに使用できますが、モジュールに記述されたアクション、ミューテーション、ゲッター、それらが取得するデフォルトパラメータはグローバルではなく、すべてローカルであり、制限されていますそれらが配置されているモジュールに送信されます。たとえば、ミューテーションとゲッターは、最初のデフォルトパラメーターとして状態を取得します。この状態パラメーターは、ミューテーションとゲッターが配置されているモジュールに限定された状態オブジェクトです。ログインフォルダー内のミューテーションとゲッターは、現在の状態のみを取得します。パラメータとしてindex.jsを使用します。アクションはコンテキストオブジェクトをパラメーターとして取得します。このコンテキストオブジェクトは、現在のモジュールのインスタンスです。このモジュールは、小さなストアに相当します。

それでは、ルートストアで状態とゲッターを取得するにはどうすればよいでしょうか? Vuex は、モジュール内のゲッターのデフォルトパラメーターとして rootState と rootGetter を提供します。アクションのコンテキストオブジェクトには、さらに 2 つのプロパティ、context.getter と context.rootState も含まれます。これらのグローバルデフォルトパラメーターは、ローカルパラメーターの後ろに位置します。

store.js に状態とゲッターを追加します:

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

  // 新增state, getters
  state: {
    job: "web"
  },
  getters: {
    jobTitle (state){
      return state.job + "developer"
    }
  }
})

loginindex.js

const actions = {
  // actions 中的context参数对象多了 rootState 参数
  changeName ({commit, rootState},anotherName) {
    if(rootState.job =="web") {
      commit("CHANGE_NAME", anotherName)
    }
  }
};

const getters = {
  // getters 获取到 rootState, rootGetters 作为参数。
  // rootState和 rootGetter参数顺序不要写反，一定是state在前，getter在后面，这是vuex的默认参数传递顺序， 可以打印出来看一下。
  localJobTitle (state,getters,rootState,rootGetters) { 
    console.log(rootState);
    console.log(rootGetters);
    return rootGetters.jobTitle + " aka " + rootState.job 
  }
};

app.vue 增加h2 展示 loacaJobTitle, 这个同时证明了getters 也是被注册到全局中的。

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

  <!-- 增加h2 展示 localJobTitle -->
  <h2>{{localJobTitle}}</h2>
  <!-- 添加按钮 -->
  <p>
   <button @click="changeName"> change to json</button>
  </p>
 </p>
</template>

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  ...mapState({
   useName: state => state.login.useName
  }),

  // mapGeter 直接获得全局注册的getters
  ...mapGetters(["localJobTitle"])
 },
 methods: {
  changeName() {
   this.$store.dispatch("changeName", "Jason")
  }
 }
}
</script>

6, 其实actions, mutations, getters, 也可以限定在当前模块的命名空间中。只要给我们的模块加一个namespaced 属性：

const state = {
  useName: "sam"
};
const mutations = {
  CHANGE_NAME (state, anotherName) {
    state.useName = anotherName;
  }
};
const actions = {
  changeName ({commit, rootState},anotherName) {
    if(rootState.job =="web") {
      commit("CHANGE_NAME", anotherName)
    }
  },
  alertName({state}) {
    alert(state.useName)
  }
};
const getters = {
  localJobTitle (state,getters,rootState,rootGetters) { 
    return rootGetters.jobTitle + " aka " + rootState.job 
  }
};
// namespaced 属性，限定命名空间
export default {
  namespaced:true,
  state,
  mutations,
  actions,
  getters
}

当所有的actions, mutations, getters 都被限定到模块的命名空间下，我们dispatch actions, commit mutations 都需要用到命名空间。如 dispacth("changeName"), 就要变成 dispatch("login/changeName"); getters.localJobTitle 就要变成 getters["login/localJobTitle"]

app.vue 如下：

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

  <!-- 增加h2 展示 localJobTitle -->
  <h2>{{localJobTitle}}</h2>
  <!-- 添加按钮 -->
  <p>
   <button @click="changeName"> change to json</button>
  </p>
 </p>
</template>

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  ...mapState("login",{
   useName: state => state.useName
  }),

   localJobTitle() {
    return this.$store.getters["login/localJobTitle"]
   }
 },
 methods: {
  changeName() {
   this.$store.dispatch("login/changeName", "Jason")
  },
  alertName() {
   this.$store.dispatch("login/alertName")
  }
 }
}
</script>

有了命名空间之后，mapState, mapGetters, mapActions 函数也都有了一个参数，用于限定命名空间，每二个参数对象或数组中的属性，都映射到了当前命名空间中。

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 computed: {
  // 对象中的state 和数组中的localJobTitle 都是和login中的参数一一对应。
  ...mapState("login",{
   useName: state => state.useName
  }),
  ...mapGetters("login", ["localJobTitle"])
 },
 methods: {
  changeName() {
   this.$store.dispatch("login/changeName", "Jason")
  },
  ...mapActions(&#39;login&#39;, [&#39;alertName&#39;])
 }
}
</script>

vuex2.0modulesの詳細説明

関連記事