關於Vue.js 2.0的Vuex 2.0 你需要更新的知識庫-js教程-PHP中文網

首頁

web前端

js教程

關於Vue.js 2.0的Vuex 2.0 你需要更新的知識庫

高洛峰

Dec 03, 2016 pm 01:22 PM

vue.js

應用結構

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

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

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

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

只要你遵循這些規則，怎麼建構你的專案的結構就取決於你了。如果你的 store 檔案非常大，只要拆分成 action、mutation 和 getter 多個檔案即可。

對於稍微複雜點的應用，我們可能都需要用到模組。以下是一個簡單的專案架構：

├── index.html
├── main.js
├── api
│   └── ... # 這裡發起API 請求
├── components
│ ─ App.vue
│   └── ...
└── store
    ├── index.js          #
    ├── mutations.js      # 根mutations
    └── modules
        ├── cart.js       # cart 模組
    車實例。

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&#39;s state
store.state.b // -> moduleB&#39;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(&#39;increment&#39;)
  }
 }
 }
}

登入後複製

在模組的 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 = &#39;todos/DONE_COUNT&#39;
export const FETCH_ALL = &#39;todos/FETCH_ALL&#39;
export const TOGGLE_DONE = &#39;todos/TOGGLE_DONE&#39;
// modules/todos.js
import * as types from &#39;../types&#39;
 
// 用带前缀的名称来定义 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 創建之後註冊一個模組：

rrrestate

re. myModule 暴露為模組的狀態。

其他的 Vue 外掛可以為應用的 store 附加一個模組，然後透過動態註冊就可以使用 Vuex 的狀態管理功能了。例如，vuex-router-sync 函式庫，透過在一個動態註冊的模組中管理應用程式的路由狀態，從而將 vue-router 和 vuex 整合。

你也能用 store.unregisterModule(moduleName) 移除動態註冊過的模組。但是你不能用這個方法移除靜態的模組（也就是在 store 建立的時候宣告的模組）。

Plugins

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

store.registerModule(&#39;myModule&#39;, {
 // ...
})

登入後複製

然後像這樣使用：

const myPlugin = store => {
 // 当 store 在被初始化完成时被调用
 store.subscribe((mutation, state) => {
 // mutation 之后被调用
 // mutation 的格式为 {type, payload}。
 })
}

登入後複製

然後像這樣使用：

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

登入後複製

-像你的元件，它們只能被mutations 來觸發改變。

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

export default function createWebSocketPlugin (socket) {
 return store => {
 socket.on(&#39;data&#39;, data => {
  store.commit(&#39;receiveData&#39;, data)
 })
 store.subscribe(mutation => {
  if (mutation.type === &#39;UPDATE_DATA&#39;) {
  socket.emit(&#39;update&#39;, 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 !== &#39;production&#39;
 ? [myPluginWithSnapshot]
 : []
})

登入後複製

reee

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

內建 Logger 外掛程式

如果你正在使用 vue-devtools，你可能不需要。

Vuex 带来一个日志插件用于一般的调试:

import createLogger from &#39;vuex/dist/logger&#39;
 
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
 }
})

登入後複製

日志插件还可以直接通过

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7926

Java教學

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1249

Related knowledge

深入探討vite是怎麼解析.env檔的 Jan 24, 2023 am 05:30 AM

使用vue框架開發前端專案時，我們部署的時候都會部署多套環境，往往開發、測試以及線上環境呼叫的介面網域都是不一樣的。如何能做到區分呢？那就是使用環境變數和模式。

圖文詳解如何在Vue專案中整合Ace程式碼編輯器 Apr 24, 2023 am 10:52 AM

Ace 是一個用 JavaScript 寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器，並且是 Mozilla Skywriter (Bespin) 專案的繼承者。