插件
Vuex 的 store 接受 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数:
然后像这样使用:
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
})
在插件中不允许直接修改状态——类似于组件,只能通过提交 mutation 来触发变化。
const plugin = createWebSocketPlugin(socket)
const store = new Vuex.Store({
state,
mutations,
})
有时候插件需要获得状态的“快照”,比较改变的前后状态。想要实现这项功能,你需要对状态对象进行深拷贝:
生成状态快照的插件应该只在开发阶段使用,使用 webpack 或 Browserify,让构建工具帮我们处理:
const store = new Vuex.Store({
plugins: process.env.NODE_ENV !== 'production'
? [myPluginWithSnapshot]
: []
})
上面插件会默认启用。在发布阶段,你需要使用 webpack 的 DefinePlugin 或者是 Browserify 的 使 process.env.NODE_ENV !== 'production'
为 false
。
createLogger
函数有几个配置项:
const logger = createLogger({
collapsed: false, // 自动展开记录的 mutation
filter (mutation, stateBefore, stateAfter) {
// 若 mutation 需要被记录,就让它返回 true 即可
// 顺便,`mutation` 是个 { type, payload } 对象
transformer (state) {
// 在开始记录之前转换状态
// 例如,只返回指定的子树
return state.subTree
},
mutationTransformer (mutation) {
// mutation 按照 { type, payload } 格式记录
// 我们可以按任意方式格式化
return mutation.type
},
logger: console, // 自定义 console 实现,默认为 `console`
日志插件还可以直接通过 <script>
标签引入,它会提供全局方法 。
要注意,logger 插件会生成状态快照,所以仅在开发环境使用。