DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 關於Vue.js 2.0的Vuex 2.0 你需要更新的知識庫
關於Vue.js 2.0的Vuex 2.0 你需要更新的知識庫
編輯:關於JavaScript     

應用結構

實際上,Vuex 在怎麼組織你的代碼結構上面沒有任何限制,相反,它強制規定了一系列高級的原則:

1、應用級的狀態集中放在 store 中。

2、改變狀態的唯一方式是提交mutations,這是個同步的事務。

3、異步邏輯應該封裝在action 中。

只要你遵循這些規則,怎麼構建你的項目的結構就取決於你了。如果你的 store 文件非常大,僅僅拆分成 action、mutation 和 getter 多個文件即可。

對於稍微復雜點的應用,我們可能都需要用到模塊。下面是一個簡單的項目架構:

├── index.html
├── main.js
├── api
│   └── ... # 這裡發起 API 請求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 組合 modules 、export store
    ├── actions.js        # 根 action
    ├── mutations.js      # 根 mutations
    └── modules
        ├── cart.js       # cart 模塊
        └── products.js   # products 模塊

關於更多,查看 購物車實例。

Modules

由於使用了單一狀態樹,應用的所有狀態都包含在一個大對象內。但是,隨著我們應用規模的不斷增長,這個Store變得非常臃腫。

為了解決這個問題,Vuex 允許我們把 store 分 module(模塊)。每一個模塊包含各自的狀態、mutation、action 和 getter,甚至是嵌套模塊, 如下就是它的組織方式:

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 state

模塊本地狀態

模塊的 mutations 和 getters方法第一個接收參數是模塊的本地狀態。

const moduleA = {
 state: { count: 0 },
 mutations: {
 increment: (state) {
  // state 是模塊本地的狀態。
  state.count++
 }
 },

 getters: {
 doubleCount (state) {
  return state.count * 2
 }
 }
}

相似地,在模塊的 actions 中,context.state 暴露的是本地狀態, context.rootState暴露的才是根狀態。

const moduleA = {
 // ...
 actions: {
 incrementIfOdd ({ state, commit }) {
  if (state.count % 2 === 1) {
  commit('increment')
  }
 }
 }
}

在模塊的 getters 內,根狀態也會作為第三個參數暴露。

const moduleA = {
 // ...
 getters: {
 sumWithRootCount (state, getters, rootState) {
  return state.count + rootState.count
 }
 }
}

命名空間

要注意,模塊內的 actions、mutations 以及 getters 依然注冊在全局命名空間內 —— 這就會讓多個模塊響應同一種 mutation/action 類型。你可以在模塊的名稱中加入前綴或者後綴來設定命名空間,從而避免命名沖突。如果你的 Vuex 模塊是一個可復用的,執行環境也未知的,那你就應該這麼干了。距離,我們想要創建一個 todos 模塊:

// 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 方法在 store 創建之後注冊一個模塊:

store.registerModule('myModule', {
 // ...
})

模塊的 store.state.myModule 暴露為模塊的狀態。

其他的 Vue 插件可以為應用的 store 附加一個模塊,然後通過動態注冊就可以使用 Vuex 的狀態管理功能了。例如,vuex-router-sync 庫,通過在一個動態注冊的模塊中管理應用的路由狀態,從而將 vue-router 和 vuex 集成。

你也能用 store.unregisterModule(moduleName) 移除動態注冊過的模塊。但是你不能用這個方法移除靜態的模塊(也就是在 store 創建的時候聲明的模塊)。

Plugins

Vuex 的 store 接收 plugins 選項,這個選項暴露出每個 mutation 的鉤子。一個 Vuex 的插件就是一個簡單的方法,接收 sotre 作為唯一參數:

const myPlugin = store => {
 // 當 store 在被初始化完成時被調用
 store.subscribe((mutation, state) => {
 // mutation 之後被調用
 // mutation 的格式為 {type, payload}。
 })
}

然後像這樣使用:

const store = new Vuex.Store({
 // ...
 plugins: [myPlugin]
})

在插件內提交 Mutations

插件不能直接修改狀態 - 這就像你的組件,它們只能被 mutations 來觸發改變。

通過提交 mutations,插件可以用來同步數據源到 store。例如, 為了同步 websocket 數據源到 store (這只是為說明用法的例子,在實際中,createPlugin 方法會附加更多的可選項,來完成復雜的任務)。

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 或 Browserify,讓構建工具幫我們處理:

const store = new Vuex.Store({
 // ...
 plugins: process.env.NODE_ENV !== 'production'
 ? [myPluginWithSnapshot]
 : []
})

插件默認會被起用。為了發布產品,你需要用 Webpack 的 DefinePlugin 或者 Browserify 的 envify 來轉換 process.env.NODE_ENV !== 'production' 的值為 false。

內置 Logger 插件

如果你正在使用 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
 }
})

日志插件還可以直接通過 <script> 標簽, 然後它會提供全局方法 createVuexLogger 。

要注意,logger 插件會生成狀態快照,所以僅在開發環境使用。

嚴格模式

要啟用嚴格模式,只需在創建 Vuex store 的時候簡單地傳入 strict: true。

const store = new Vuex.Store({
 // ...
 strict: true
})

在嚴格模式下,只要 Vuex 狀態在 mutation 方法外被修改就會拋出錯誤。這確保了所有狀態修改都會明確的被調試工具跟蹤。

開發階段 vs. 發布階段

不要在發布階段開啟嚴格模式! 嚴格模式會對狀態樹進行深度監測來檢測不合適的修改 —— 確保在發布階段關閉它避免性能損耗。
跟處理插件的情況類似,我們可以讓構建工具來處理:

const store = new Vuex.Store({
 // ...
 strict: process.env.NODE_ENV !== 'production'
})


相關引用

http://vuex.vuejs.org/en/plugins.html
http://vuex.vuejs.org/en/strict.html
http://vuex.vuejs.org/en/modules.html
http://vuex.vuejs.org/en/structure.html

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved