アプリケーション構造
実際、Vuex にはコード構造の編成方法に制限がありません。それどころか、次のような一連の高レベルの原則が強制されます。
1. アプリケーション レベルのステータスはストアに集中します。
2. 状態を変更する唯一の方法は、同期トランザクションであるミューテーションを送信することです。
3. 非同期ロジックは動作中にカプセル化する必要があります。
これらのルールに従っている限り、プロジェクトをどのように構成するかはあなた次第です。ストア ファイルが非常に大きい場合は、アクション ファイル、ミューテーション ファイル、ゲッター ファイルに分割してください。
もう少し複雑なアプリケーションの場合は、モジュールを使用する必要がある場合があります。以下は、単純なプロジェクト構造です:
§──index.html
§──main.js
§──api
│ └── ... # ここで API リクエストを開始します
├── コンポーネント
│ §── ─ App.Vuep│ └ ── ...
└ ─ ─ ─ ─ ─ i — ├ § § § ─ ─ ActionS.js # § ─ ─ Mutations.js # ルート変異 変異
└─ モジュール
っていつ─ cart.js └── cart.js └── products.js # products モジュール
詳細については、ショッピング カートの例をご覧ください。
モジュール
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA's state
store.state.b // -> moduleB's stateconst moduleA = {
state: { count: 0 },
mutations: {
increment: (state) {
// state 是模块本地的状态。
state.count++
}
},
getters: {
doubleCount (state) {
return state.count * 2
}
}
}const moduleA = {
// ...
actions: {
incrementIfOdd ({ state, commit }) {
if (state.count % 2 === 1) {
commit('increment')
}
}
}
}const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}// types.js
// 定义 getter、 action 和 mutation 的常量名称
// 并且在模块名称上加上 `todos` 前缀
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
// modules/todos.js
import * as types from '../types'
// 用带前缀的名称来定义 getters, actions and mutations
const todosModule = {
state: { todos: [] },
getters: {
[types.DONE_COUNT] (state) {
// ...
}
},
actions: {
[types.FETCH_ALL] (context, payload) {
// ...
}
},
mutations: {
[types.TOGGLE_DONE] (state, payload) {
// ...
}
}
}store.registerModule('myModule', {
// ...
})const myPlugin = store => {
// 当 store 在被初始化完成时被调用
store.subscribe((mutation, state) => {
// mutation 之后被调用
// mutation 的格式为 {type, payload}。
})
}const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})export default function createWebSocketPlugin (socket) {
return store => {
socket.on('data', data => {
store.commit('receiveData', data)
})
store.subscribe(mutation => {
if (mutation.type === 'UPDATE_DATA') {
socket.emit('update', mutation.payload)
}
})
}
}const plugin = createWebSocketPlugin(socket)
const store = new Vuex.Store({
state,
mutations,
plugins: [plugin]
})const myPluginWithSnapshot = store => {
let prevState = _.cloneDeep(store.state)
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state)
// 对比 prevState 和 nextState...
// 保存状态，用于下一次 mutation
prevState = nextState
})
}プラグインはデフォルトで有効になります。本番環境に出荷するには、Webpack の DefinePlugin または Browserify の envify を使用して process.env.NODE_ENV !== 'production' を false に変換する必要があります。 組み込みロガープラグイン
如果你正在使用 vue-devtools，你可能不需要。
Vuex 带来一个日志插件用于一般的调试:
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
plugins: [createLogger()]
})
createLogger 方法有几个配置项：
const logger = createLogger({
collapsed: false, // 自动展开记录 mutation
transformer (state) {
// 在记录之前前进行转换
// 例如，只返回指定的子树
return state.subTree
},
mutationTransformer (mutation) {
// mutation 格式 { type, payload }
// 我们可以按照想要的方式进行格式化
return mutation.type
}
})
日志插件还可以直接通过
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
