Vuex学习笔记

Vuex借鉴Flux开发思想，帮助你用更好的程序架构开发Vue.js应用，主要体现在帮你更好地管理状态。

数据存储在哪里？

整个应用的状态数据存储在一个单例store中

组件怎样获取状态？

组件要使用状态（getter of state）则在组件引入vuex配置，为每个computed变量指定一个getter方法，方法的第一个参数总是state，然后返回你想要的

怎么修改状态？
谨记组件的状态getter不要做任何直接修改状态的事情，或者是触发其他有副作用的事件等。想管理状态则触发mutation，真正给state动刀的是在vuex。

每当你需要管理状态时，每个改变都可以定义成一个命令，叫Mutation，通过在store中定义命令和执行器，要改变状态就通过store发出这个命令。

Mutation强调同步操作，至于你要对管理状态作出异步的操作就得看看Action

如何异步修改状态？

在组件中vuex配置相关action，然后方法就直接在vm下可以访问，方法的实现通常是在异步操作中组合一些mutation，当然，如果Action用在同步场景，你可以把Action理解成用于组合Mutation的大Mutation，另外 ，action方法的第一个参数总是store

简单同步操作用Mutation还是Action？

从语法来说，你喜欢哪个都行，不过统一开发思路，在组件内，只跟action打交道，然后action里面再去转发Mutation，这样开发体验统一，你无须访问store，好维护。官方指定的规则也是只用action

怎么处理多模块？

如果应用简单，mutation、action、state各自定义一个总文件，如果多模块，那么在每个模块定义各自的这三个部分，借助vuex store的modules配置，子模块内开发体验跟原来的没差，也不需要关注它是否为一个子模块。

想要一些回调的钩子啥的，拦截一些state的处理作分析，有吗？

store有middlewares配置，让你可以拦截所有mutation，在开发环境可以使用内置的logger中间件，打印mutation，而且能获得前后的state快照。

如果我不遵循潜规则，然后在vuex以外修改状态，你管得着吗？

确实管不着，不过开发阶段可以开启strict模式，在mutation以外地方修改state会报错

我也想遵循潜规则，但是在表单input中用v-model，双向绑定呀，会在mutation以外修改state，怎么办？

提供三个思路：

1、不要用v-model，改用value绑定显示，注册input事件，手动调用action更新

2、如果小case，就不要让vuex跟踪，弄个组件自己状态，继续愉快v-model，vuex管不到你的状态

3、保持v-model，又不让vuex管，那你定义一个computed的值，getter你懂的，至于setter就调用action

怎么测试mutation和action？

mutation比较好测试，就是同步函数，当做工具方法来测，自己模拟state开测。至于action，如果依赖了外部API会比较麻烦，借助webpack的inject-loader对每个依赖的外部方法手动mock（包括请求的数据），是有点麻烦。

mutation和action支持热重载。

欢迎转载，但转载请注明来自 zhenyong.site，并保持转载后文章内容的完整