今回は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 })
りー
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) } }
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) }) } }
vue-cli 3.0.x webpack4にアップグレード後の新機能とは何ですか
JSはJSON配列で重複排除アルゴリズムをどのように実装しますか
以上がvuex のプロジェクト構造と構成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。