快速入门Vuex 魔法

Vuex核心

• Store
• State
• Mutation
• Action
• Module

Vuex 的工作流程图

112263-6fd755db3b988245.png

下面我们可以逐一理解

Store 可以理解成一个容器，包涵了State等

const mutations = {...};
const actions = {...};
const state = {...};
const getter = {...};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

State

状态树 负责存储整个状态数据 一般需要注入store中

const state = {
    num:123,
    str:'这是一个很长的文字。。。。'
}

使用方法 1.直接使用 2.使用vuex提供的语法糖

1. this.$store.state.num
  
2. import {mapState} from 'vuex'
   computed: {
            ...mapState({
                num: state => state.num

            })

Mutations

中文 '变化' ， 因为Vuex 是单向数据流 所以只能通过Mutations 来改变 状态

const mutations = {
    SETNUM(state) {
        state.num++;
    },
    SUBNUM(state) {
        state.num--;
    },
    ADDNUM(state,n) {
        state.num+=n
    }
}

使用方法 1.直接使用 2.使用vuex提供的语法糖直接映射到methods 上

1.this.$store.commit('mutationName')
2.  methods: {
    ...mapMutations([
                'SUBNUM',
                'ADDNUM'
            ]),
  }
  // template
    -1

mutation 是可以接受参数的

ADDNUM(state,n) {
        state.num+=n
    }

在组件中使用

  this.ADDNUM(parseInt(this.addnum))

Actions

可以用于改变状态，不过是通过触发mutation实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似，也是绑定在组件的methods上的。
使用方法

 1.this.$store.dispatch(actionName)
 2.import {mapActions} from 'vuex'
  export default {
  methods: mapActions([
    'actionName',
  ])
}

Getters

有些状态需要做二次处理，就可以使用getters。

const getters = {
    strleng: state =>state.str.length
}

import {mapGetters} from 'vuex'
export default {
  computed: mapGetters([
    'strLength'
  ])
  //或
    getStrLenght() {
      return this.$store.getters.strleng
    },
}

待完善

参考文档
https://vuex.vuejs.org/zh-cn/getters.html