ホームページ > 記事 > ウェブフロントエンド > 簡単な vuex とモジュール化を学ぶ

簡単な vuex とモジュール化を学ぶ

小云云オリジナル: 2018-01-16 09:18:251662ブラウズ

Vuex は単一の状態ツリーの使用を重視しています。つまり、プロジェクト内にストアが 1 つだけ存在し、このストアがプロジェクト内のすべてのデータとそのデータに対する操作を集中管理します。しかし、これが引き起こす問題は、ストアが非常に肥大化して保守が困難になる可能性があるため、状態ツリーをモジュールに分割する必要があることです。

チュートリアルの例

この例は、vue-cli に基づいて構築されています。以下は、src ファイルの下のコンテンツディレクトリです。

├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模块文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

効果はこんな感じです(シンプルさを嫌いにしないでください)

この例では、モジュール関連の知識を含む、基本的に一般的な、ドキュメントで言及されているすべての vuex 関連の知識を使用しました。使用シナリオは次のとおりです。すべてカバーされています。

これ以上ナンセンスはありません、始めましょう。

まず、app.vue と router はルーティングに関連するもので、ドキュメントを見れば理解できます。

vuex のモジュール化

この例を書く前に、私は最初はかなり新鮮でした。結局のところ、vuex はこれまでのプロジェクトでは深く使用されていませんでした。 vuex を含む js で機能はすべて完成しましたが、プロジェクトが複雑な場合は確かにこのように書くことはできません。そのため、この点についてのアイデアを明確にするためにサンプルを書きたいと思いました。結果は非常に簡単です。

ストアファイルのコンテンツは、vuex の 5 つの中心的な概念に従って構築されており、そうすることの利点は、mutation.js や mutation-type.js など、ビジネスロジックの整理やその後のメンテナンスに非常に便利です。

ミューテーション内のメソッド名を定数として抽出し、別のファイルに置き、使用するときに関連するコンテンツを引用します。これは、どのメソッドが存在するかを管理および理解するのが非常に簡単で、非常に直感的です。一方、アクションを使用する必要がある場合もあります。同じメソッド名を使用して、定数ファイルを導入するだけで済みます。

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';


export default {
 CHANGE_COUNT
}

これはどうですか、ファイルに書くほど面倒ではないようです。

...mapGetters と...mapActions

tab1.vue 内:

// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations

index.js ファイル:

// action.js
import type from './mutation-type'

let actions = {
 [type.CHANGE_COUNT]({ commit }) {
 
 commit(type.CHANGE_COUNT)
 
 }
}

export default actions

vuex は補助関数と呼ばれるものを提供しており、その利点によりページでの作業が可能になります。使用する必要があるものを表示したり、使用時に記述するコンテンツを減らすこともできますが、これは必須ではありません。自分のニーズに応じて使用できます。

効果が発揮される場所が異なるので注意が必要です。

...mapGetters はこのページの計算されたプロパティに記述されており、計算されたプロパティを使用するのと同じようにゲッター内のコンテンツを使用できます。

...mapActions はこのページのメソッドに記述されており、他のメソッドで呼び出すことも、次のように @click に直接記述することもできます:

// tab1.vue
<template>
 <p>
 <p>这是tab1的内容</p>
 <em @click="add">{{count}}</em>
 <p>getter:{{NewArr}}</p>
 </p>
</template>


<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
 computed: {
 ...mapGetters([
 'NewArr'
 ]),
 count: function() {
 return this.$store.state.count;
 },
 },
 methods: {
 ...mapActions({
 CHANGE_COUNT: type.CHANGE_COUNT
 }),
 add: function() {
 this.CHANGE_COUNT(type.CHANGE_COUNT);
 }
 }
};
</script>

<style lang="" scoped>

</style>

Jiang Zi、tab1 の数字は毎回 1 ずつ増加します。をクリックします。

mudule

vuex のドキュメントはモジュールについて曖昧なので、やはり自分で使用する必要があります。

この例では、同じ名前の 2 つのコンポーネントに対応する 2 つのモジュールを設定しました。もちろん、tab2 を見てください。

import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'

Vue.use(Vuex)

let state = {
 count: 1,
 arr:[]
}


let store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions,
 modules:{
 tab2,tab3
 }
 
})

export default store

<em @click="CHANGE_COUNT">{{count}}</em>

この例では、主にページ上のモジュールに記載されている呼び出し方法を確認します。

まず状態について話しましょう。これは非常に簡単です。このページに次のように記述するだけです。このページに stete がネストされたレイヤーを追加していることがわかります。

アクション、ミューテーション、ゲッターに関しては、一般的な使い方と同じで、違いはありません。

また、ゲッターとアクションでは、rootState を通じてルート構造の状態を取得できます。ミューテーションにはそのようなメソッドはありません。

簡単な vuex とモジュール化を学ぶ

関連記事