vuex のプロジェクト構造と構成の概要

今回はvuexのプロジェクト構造と構成について紹介します。vuexプロジェクトの構造と構成を使用する際の注意点は何ですか?実際の事例を見てみましょう。

まず最初に、公式ウェブサイトからの重大な「アドバイス」を以下に示します。

vuex が遵守する必要があるルール:

1. アプリケーションレベルのステータスは、単一のストア

オブジェクト に集中される必要があります。

2. ミューテーションの送信が状態を変更する唯一の方法であり、このプロセスは同期的です。

3. すべての非同期ロジックは

action にカプセル化する必要があります。

ファイル

ディレクトリ構造

ファイル間の関係:

ストアフォルダー - vuex シリーズのファイルを保存します

store.js - vuex の導入、状態データの設定、ゲッター、ミューテーション、アクションの導入

getter.js - ストア内のステータスを取得します

mutation.js - ストア内の状態を変更するために使用される関数が保存される場所

action.js - ミューテーションを送信して状態を巧みに変更し、非同期で操作できます

シンプルで一般的な書き方

store.js ファイル:

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
 a: '初始值',
 b: 'balabala...'
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

main.js ファイル内 (ルーターを挿入するのと同じように、ルート コンポーネントからストアを挿入します):

ルート インスタンスにストア オプションを登録すると、ルート コンポーネント以下のすべての子コンポーネントにストア インスタンスが挿入され、this.$store を通じて子コンポーネントにアクセスできるようになります。

りー

Getter.jsの簡単な設定(ストアの

プロパティを計算し、状態をパラメータとして受け取る)

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store,
 ...
})

取得 (コンポーネントの内部計算プロパティ):

export default {
  doneTodos: state = >{
   return state.todos.filter(todo = >todo.done)
  }
}

パラメータを渡せるゲッタープロパティの簡単な設定

computed: {
 doneTodosCount () { 
  return this.$store.getters.doneTodosCount 
 }
}

取得 (特定のコンポーネントの内部計算プロパティ):

export default{
 getTodoById: (state) => (id) => { 
  return state.todos.find(todo => todo.id === id) 
 }
}

mutation.js の簡単な構成:

computed: {
 getTodoById() { 
  return this.$store.getters.getTodoById(‘参数')
 }
}

トリガー (コンポーネント内)

export default {
  increment(state) {
   //变更状态
   state.count++
  }
}

トリガー (コンポーネント)

this.$store.commit(state,payload)
actions.js简单配置：
export default{
 action (context) {
 //异步操作
  setTimeout（（）=>{
   //变更状态
   context.commit('mutationFunName'，value)
  }）
 }
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-cli 3.0.x webpack4にアップグレード後の新機能とは何ですか

JSはJSON配列で重複排除アルゴリズムをどのように実装しますか

以上がvuex のプロジェクト構造と構成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。