关于Vuex中的数据流向

Vuex几个核心概念

• state 相当于Vue中的data
• getter 相当于Vue中的computed，可以认为是store的计算属性
• mutations 相当于Vue中的methods，定义一些方法，唯一改变state数据的办法是提交mutations
• actions 跟mutations类似，可以处理异步逻辑
• modules 主要解决的是多个store对外暴露的问题

在src目录下创建store，包含以下js

举例说明

//state.js
export default {
    count:8
}

//mutations.js
export default{
    increase(state,payload){
        state.count = payload.count
    }
}

//action.js
export default{
    changeNumber({commit},e){
        commit('changeCount',{ //action提交mutation中的方法
            count:e.count
        })
    }
}

获取数据
1、通过state获取，适合数据量小的情况

import store from '../store'
computed:{
    count(){
        return store.state.count
    }
}

2、通过mapState辅助函数获取，适合数据量大的情况

import { mapState } from 'vuex'
computed:{
    //数组形式
    ...mapState(['count','name','age'])
    //对象形式
    ...mapState({
        userName:'name',
        addAge: function (state) { //为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
            return this.number + state.age
        },
        count: (state) => { //count 为 store.state.count的值
            return state.count
        },
    })
}

3、通过getters获取

//通过getter,从state中派生出一些状态
  getters: {
    doneTodos: (state) => {
      return state.todos.filter(todo => todo.done)
    }
  }
//组件内获取
  computed: {
    todo() {
      return this.$store.getters.doneTodos;
    }
  }

4、通过mapGetters获取

computed: {
    ...mapGetters(['todo'])
}

当state中的数据发生变化时，Getter会进行重新计算。

改变数据
1、通过 commit 提交mutation。也可以通过mapMutations辅助函数。

commit有2个参数，第一个是mutations中的方法，第二个改变数据的方法；
mutation回调函数的第一个参数始终是state，第二个为额外参数，即mutation的载荷playload。

import store from '../store'
<div @click="changeNumber">点击</div>

methods:{
    changeNumber(){
        store.commit('increase',{ 
            count:10
        })
    }
}

2、通过store.dispatch方法触发action，action提交mutation中的方法改变数据。
actions和mutation比较类似，action可以看作指挥者，mutation看作操作者。action提交的是mutation，并且actions可以处理异步逻辑。

<div @click="changeNumber">点击</div>

methods:{
    changeNumber(){
        store.dispatch('changeNumber',{ //dispatch提交action中的方法
          count:11
        })
    }
}

//action.js
changeNumber({commit},e){
    commit('changeCount',{ //action提交mutation中的方法
        count:e.count
    })
}
    
//mutation.js
changeCount(state,payload){
    state.count = payload.count
}

后续更新中…