vue中状态管理器中几种写法（解构赋值和辅助函数的写法）

vue中状态管理器中几种写法（解构赋值和辅助函数的写法）

最近被vue中的状态管理器中几种写代码的方式所困扰，自己写的基础代码看得懂，别人写的几种升级版就看不懂了，这里梳理了几种书写方法：

基础版
状态中的写法

export default {
  state: {
    kindlist: [1, 2, 3]
  },
  getters: {},
  actions: { 
    getKindList (context) { // context是默认的参数
      axios.get('https://www.接口.com').then(res => {
        context.commit('changeKindList', res.data)
      })
    }
  },
  mutations: {
    changeKindList (state, data) {
      state.kindlist = data
    }
  }
}

组件中的写法

export default {
  mounted () {
    this.$store.dispatch('getKindList')
  }
  computed: {
    kindlist () {
      return this.$store.state.kind.kindlist
    }
  }
}

升级一下(运用了解构赋值)

状态的写法```

export default {
  state: {
    kindlist: []
  },
  getters: {},
  actions: {
    getKindList ({ commit }) { // context    context.commit()   参数解构赋值
      axios.get('https://www.接口.com').then(res => {
        commit('changeKindList', res.data)
      })
    }
  },
  mutations: {
    changeKindList (state, data) {
      state.kindlist = data
    }
  }
}

组件的写法

export default {
  mounted () {
    let { $store: { dispatch } } = this
    dispatch('getKindList')
  },
  computed: {
    kindlist () {
      let { $store: { state: { kind: { kindlist } } } } = this
      return kindlist
    }
  }
}

最终版加入了辅助处理函数，把mounted中的dispatch放入methods方法中，在mounted中只要调用一下方法就好，再加上箭头函数的写法。
状态的写法：
跟上面是一样的。就不写了
组件的升级一下：

import { mapState, mapActions } from 'vuex'
export default {
  mounted () {
    this.getKindList()
  },
  methods: {
    ...mapActions({
      getKindList: 'getKindList'
    })
  },
  computed: {
    ...mapState({
      kindlist: ({ kind: { kindlist } }) => kindlist
    })
  }
}

总结：
这就是vue中几种升级版本的写法，也许还有更高明的写法，不用怕，按照逻辑反推一下，说到底还是原来的逻辑。这里分析的不好，希望大家谅解。