vuex プロジェクトの構造ディレクトリと設定の使用方法

今回は、vuex プロジェクトの構造ディレクトリと設定の使い方と、vuex プロジェクトの構造ディレクトリと設定を使用する際の注意点について説明します。以下は実践的なケースですので、見てみましょう。

vuex が従う必要があるルール:

1. アプリケーションレベルのステータスは単一のストアオブジェクトに集中される必要があります。

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

3. 非同期ロジックはアクションにカプセル化する必要があります。

ファイルディレクトリ構造

ファイル間の関係:

storeフォルダー - 一連の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 を通じてアクセスできます。

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

Getter.jsの簡単な設定(ストアの計算されたプロパティ、パラメータとして状態を受け取る)

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

Get(コンポーネントの計算されたプロパティ内):

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

渡せるgetter属性の簡単な設定

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

Get(計算されたコンポーネントのプロパティ (内部):

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

mutation.js の簡単な構成:

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

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

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

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

this.$store.dispatch('mutationFunctionName')
2018-04-07 18:13:34

この記事の事例を読んだ後は、方法をマスターできたと思います。 、さらにエキサイティングなことが起こるでしょう php 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

vue-routerの遅延読み込みによる読み込み速度の最適化

JSはcreateElement()を使用してHTMLを動的に追加します

以上がvuex プロジェクトの構造ディレクトリと設定の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。