P10:VUEX的使用

介绍

首先 store 文件夹下的结构为：

  • index.js

入口文件

  • state.js：

1,整个应用状态的数据
2,可以通过this.$store.state获取状态
3,用mapState将其映射到computed里面

1
2
3
4
5
6
import {mapState} from 'vuex'
export default{
    computed(){
        const state => state.count
    }
}

  • getter.js

1,有时候我们需要从store中的state中派生出来一些状态,Vuex 允许我们在store中定义“getter”，就是store的计算属性，
2,可以通过this.$store.getters.valueName获取到这些状态
3,用mapGetter将其映射到computed里面去

1
2
3
4
5
6
7
8
9
10
11
getter:{
    doSome:state =>{
        return state.doSome.filter(todo => todo.done)
    }
}
export default {
    computed: mapGetters([
        'doSome'
    ])
}

  • mutation-types.js

定义一些const,触发方法，

例如：

1
export const SET_SOMETHING = "SET_SOMETHING"
  • mutations.js

1,变化，利用他来更改状态，接收的唯一参数就是state,store.commit(mutationName)是用来触发一个mutation的方法
2,可以通过this.$store.commit执行，例如：

1
2
3
4
5
6
const mutations = {
    mutationName(state){
        //如何改变，some code
    }
}
//this.$store.commit('mutationName');

3,用mapMutations将其映射到methods里面

1
2
3
4
5
export default {
    methods: mapMutations([
        'mutationName'
    ])
}

  • actions.js

改变状态，通过触发mutations实现，可以包含异步操作。

辅助函数为mapActions，与mapMutations类似，也是映射到methods。

1
2
3
4
5
6
7
8
9
10
11
12
13
const actions = {
    actionName({ commit }) {
        //dosomething
        commit('mutationName')
    }
}
export default {
    methods: mapActions([
        'actionName',
    ])
}
▲ ▼