この記事では主に 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 'vue'
import App from './App.vue'
// 引入store
import store from "./store"
new Vue({
el: '#app',
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 にボタンを追加します:
をクリックすると、コンポーネントでアクションをディスパッチします。
モジュールでは、状態はモジュールの名前空間に制限されており、アクセスするには名前空間が必要です。 ただし、アクション、ミューテーション、および実際のゲッターは、デフォルトでは、グローバル名前空間に登録されます。いわゆるグローバル名前空間への登録は、実際には、モジュールを使用しない元のモジュールと同じようにアクセスすることを意味します。時代も同じだ。たとえば、モジュールがなかったときは 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")
}
}
} ログイン後にコピー
ディスパッチアクションとコミットミューテーションはグローバルに使用できますが、モジュールに記述されたアクション、ミューテーション、ゲッター、それらが取得するデフォルトパラメータはグローバルではなく、すべてローカルであり、制限されていますそれらが配置されているモジュールに送信されます。たとえば、ミューテーションとゲッターは、最初のデフォルト パラメーターとして状態を取得します。この状態パラメーターは、ミューテーションとゲッターが配置されているモジュールに限定された状態オブジェクトです。ログイン フォルダー内のミューテーションとゲッターは、現在の状態のみを取得します。パラメータとして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"
}
}
}) ログイン後にコピー
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('login', ['alertName'])
}
}
</script> ログイン後にコピー
相关推荐：
Yii2 如何在modules中添加验证码的方法详解
yaf框架中modules下的目录，配置二级域名
JavaScript ES6中关于module语法的详解
以上がvuex2.0modulesの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
