关于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          # 组合 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&#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 创建之后注册一个模块：

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

登录后复制

模块的 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(&#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]
 : []
})

登录后复制

插件默认会被起用。为了发布产品，你需要用 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邮箱登陆入口在哪里

7857

Java教程

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1242

显示更多

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) 项目的继承者。