基于 vue2.x 的 table 组件支持单元格合并、单元

API http://doc.huangsw.com/vue-easytable/app.html#/intro

mapState辅助函数

//在单独构建的版本中辅助函数为 Vuex.mapState import { mapState } from 'vuex' export default { // ... computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } }) }

当映射的计算属性的名称与state的子节点名称相同时，也可以给mapState传一个字符串数组

computed: mapState([ // 映射 this.count 为 store.state.count 'count' ]) Getter

Vuex 允许在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getters接受state作为其第一个参数

const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } })

Getters也可以接受其他getter作为第二参数

getters:{ //.... doneTodosCount:(state,getters)=>{ return getters.doneTodos.length } } 通过方法访问

getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 辅助函数

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性

import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } Mutation 同步函数

更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。

提交mutation的另一种方式是直接使用包含type属性的对象：

store.commit({ type: 'increment', amount: 10 })

当使用对象风格的提交方式，整个对象都作为载荷传给mutation函数，因此handler保持不变

// mutation-types.js export const SOME_MUTATION = 'SOME_MUTATION' // store.js import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名 [SOME_MUTATION] (state) { // mutate state } } }) 在组件中提交mutation

import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) } } Action

action类似于mutation,不同在于：

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })

Action函数中接受一个与store实例具有相同方法和属性的context对象，因此可以调用context.commit 提交一个mutation，或者通过context.state和context、getters来获取state和getters。

ES2015的参数解构来简化代码

actions: { increment ({ commit }) { commit('increment') } } 分发Action

stroe.dispath('increment')

Action 支持同样的荷载方式和对象方式进行分发：

// 以载荷形式分发 store.dispatch('incrementAsync', { amount: 10 }) // 以对象形式分发 store.dispatch({ type: 'incrementAsync', amount: 10 }) 在组件中分发action

import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) } } 组合action

Action通常是异步的

actions: { actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) } }

现在你可以：

store.dispatch('actionA').then(() => { // ...})

在另外一个 action 中也可以：

actions: { // ... actionB ({ dispatch, commit }) { return dispatch('actionA').then(() => { commit('someOtherMutation') }) } }

最后，如果我们利用 async / await，我们可以如下组合 action：

// 假设 getData() 和 getOtherData() 返回的是 Promise actions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待 actionA 完成 commit('gotOtherData', await getOtherData()) } } Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就会变得相当臃肿

为了解决以上的问题，vuex允许将store分割成模块module，每个模块可以拥有自己的state、mutation、getter、action、甚至是嵌套子模块----从上至下进行同样的方式的分割