// getters.js export const getters = { filteredProducts (state, { filterCategory }) { return state.products.filter(product => { return product.category === filterCategory }) } } // getters.spec.js import { expect } from 'chai' import { getters } from './getters' describe('getters', () => { it('filteredProducts', () => { // 模拟状态 const state = { products: [ { id: 1, title: 'Apple', category: 'fruit' }, { id: 2, title: 'Orange', category: 'fruit' }, { id: 3, title: 'Carrot', category: 'vegetable' } ] } // 模拟 getter const filterCategory = 'fruit' // 获取 getter 的结果 const result = getters.filteredProducts(state, { filterCategory }) // 断言结果 expect(result).to.deep.equal([ { id: 1, title: 'Apple', category: 'fruit' }, { id: 2, title: 'Orange', category: 'fruit' } ]) }) })
执行测试如果mutation 和 action 编写正确，经过合理地 mocking 处理之后这些测试应该不依赖任何浏览器 API，因此可以直接用 webpack 打包这些测试文件然后在 Node 中执行。换种方式，也可以用 mocha-loader 或 Karma + karma-webpack在真实浏览器环境中进行测试
在Node中执行测试
// webpack.config.js module.exports = { entry: './test.js', output: { path: __dirname, filename: 'test-bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] } }
然后
webpack mocha test-bundle.js
在浏览器中测试
1、安装 mocha-loader
2、上述 webpack 配置中的 entry 改成 'mocha-loader!babel-loader!./test.js'
3、用以上配置启动 webpack-dev-server
4、访问 localhost:8080/webpack-dev-server/test-bundle
热加载使用 webpack 的 Hot Module Replacement API，Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。也可以在 Browserify 中使用 browserify-hmr 插件。
对于 mutation 和模块，需要使用 store.hotUpdate() 方法：
// store.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import moduleA from './modules/a' Vue.use(Vuex) const state = { ... } const store = new Vuex.Store({ state, mutations, modules: { a: moduleA } }) if (module.hot) { // 使 action 和 mutation 成为可热重载模块 module.hot.accept(['./mutations', './modules/a'], () => { // 获取更新后的模块 // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default` const newMutations = require('./mutations').default const newModuleA = require('./modules/a').default // 加载新模块 store.hotUpdate({ mutations: newMutations, modules: { a: newModuleA } }) })