关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库


Posted in Javascript onNovember 30, 2016

应用结构

实际上,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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 #Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 #Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 #Javascript
jquery.Callbacks的实现详解
Nov 30 #Javascript
javascript中活灵活现的Array对象详解
Nov 30 #Javascript
如何处理JSON中的特殊字符
Nov 30 #Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 #Javascript
You might like
我的论坛源代码(二)
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
javascript读写json示例
2014/04/11 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
详解Python中where()函数的用法
2018/03/27 Python
python实现tail -f 功能
2020/01/17 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
出纳试用期自我鉴定
2014/04/07 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书