Vuex のモジュール構成の詳細な説明

この記事では、Vuex の高度なモジュール構成の詳細な説明を中心に紹介しますので、参考にしてください。

自作vuexロゴ

最初の2回の記事でVuexの基本的な使い方を説明しましたが、実際のプロジェクトでこのように書くのは絶対に無理です コンポーネントが多すぎるとデータを置くことができません。 A store.js 内のすべてのコンポーネントが含まれるため、Vuex はモジュール形式で編成する必要があります。まず、プロジェクトの構造を見てください。

プロジェクト構造

1. まず次のコマンドを実行します:

vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex -S
npm run dev

2. 上記の構造に従ってファイルディレクトリを作成します

Vuex モジュールディレクトリ

3を書きます。 file

前の 2 つの記事の例を引き続き使用します。まず、各ファイルの役割について説明します。types.js で定数を定義し、定数を使用して user.js のユーザー コンポーネントで使用される状態、ゲッター、アクション、およびミューテーションを記述し、最後にそれらを均一にエクスポートします。前の例のstore.jsと同様)

getters.jsは属性を取得するために使用されるオリジナルのgetterで記述されます

actions.jsはプロセスの判断など、実行されるアクションであるオリジナルのアクションで記述されますおよび非同期リクエスト

Index.js は、actions.js、getter.js、および user.js をアセンブルし、それらを均一にエクスポートするために使用されます

1.index.js ファイルを main.js にインポートして登録します

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

2.types.js で定数を定義してエクスポートします。デフォルトでは、すべて大文字になります

// 定义类型常量，默认全部大写
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'
export default {
  INCREMENT,
  DECREMENT
}

注: これらの定数を別のファイルに置くと、コードの共同作業者がアプリ全体に含まれる変更を一度に確認できるようになります。一目。定数を使用するかどうかはあなた次第です。これは、複数の人が一緒に作業する大規模なプロジェクトで役立ちます。しかし、それが嫌なら、やる必要はありません。

3. ユーザーコンポーネントで使用される状態、ゲッター、アクション、ミューテーションを user.js に記述します

// 导入 types.js 文件
import types from "./../types";
const state ={
  count:5
}
// 定义 getters
var getters ={
  count(state){
    return state.count
  }
}
const actions ={
  increment({ commit, state }){
    // 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应，与原来 commit('increment') 的原理相同，只是把类型名换成了常量
    commit(types.INCREMENT)
  },
  decrement({commit,state}){
    if (state.count>10) {
      // 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
      commit(types.DECREMENT)
    }
  }
}
const mutations ={
  // 此处的事件为上方 actions 中的 commit(types.INCREMENT)
  [types.INCREMENT](state){
    state.count++
  },
  // 此处的事件为上方 actions 中的 commit(types.DECREMENT)
  [types.DECREMENT](state){
    state.count--
  }
}
// 最后统一导出
export default {
  state,
  getters,
  actions,
  mutations
}

注: 上記のミューテーションの [types.INCREMENT] は、types.INCREMENT がオブジェクトであるため記述できません。関数名として直接記述するには、ES2015 スタイルの計算プロパティ命名関数を使用して、関数名として定数を使用する必要があります。元の記述方法は、

const mutations ={
  increment(state){
    state.count ++;
  }
}

4. getters.js 奇数と偶数の求め方

// 因为数据从 user.js 中获取，所以需要引入该文件
import user from './modules/user'
const getters = {
  isEvenOrOdd(state){
    // 注意数据是从 user.js 中获取的，所以写成 user.state.count
    return user.state.count % 2 == 0 ? "偶数" : "奇数"
  }
}
// 并导出
export default getters;

5.actions.jsにオリジナルの非同期操作を記述する

// 异步操作中需要用到 increment 方法，所以需要导入 types.js 文件
import types from './types'
const actions= {
  incrementAsync({ commit, state }) {
    // 异步操作
    var p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 3000);
    });
    p.then(() => {
      commit(types.INCREMENT);
    }).catch(() => {
      console.log('异步操作');
    })
  }
}
// 最后导出
export default actions;

6.index.jsにactions.js、getters.js、user.jsを組み立てます。 , そして、それらをまとめてエクスポートします

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from './getters'
import actions from './actions'
import users from './modules/user'
// 导出 store 对象
export default new Vuex.Store({
  getters,
  actions,
  modules:{
    users
  }
})

注: ストア オブジェクトをエクスポートする場合、ゲッターとアクションには vuex のコア概念にデフォルト値があるため、それらを直接記述することができます。ただし、users はデフォルトではないため、vuex の modules オブジェクトがエクスポートに使用されます

コアコンセプト

7。Vue.app ファイルは変更されません

<template>
 <p id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  <button @click="incrementAsync">延时增加</button>
  <p>{{count}}</p>
  <p>{{isEvenOrOdd}}</p>
 </p>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
 name: &#39;app&#39;,
 data () {
  return {
   msg: &#39;Welcome to Your Vue.js App&#39;
  }
 },
 computed:mapGetters([
  &#39;count&#39;,
  &#39;isEvenOrOdd&#39;
 ]),
 methods:mapActions([
  &#39;increment&#39;,
  &#39;decrement&#39;,
  &#39;incrementAsync&#39;
 ])
}
</script>

ついに、スリリングな時間がやって来ました。 、長い時間がかかりました 強力なものは実行できますか?

vuex modular.gif

上記は、将来皆さんに役立つことを願っています。

関連記事:

AngularJS の双方向データ バインディングの原則 (詳細なチュートリアル)

WeChat ミニ プログラムでのデータ ストレージと値の取得に関する問題

Vue で合理化されたスタイルを実装する方法 (詳細なチュートリアル)

vue グローバル コンポーネントをカスタマイズするにはどうすればよいですか?

以上がVuex のモジュール構成の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。