VueX的基础使用

VueX中常用的有5个

state:用来存放数据的地方。

mutations:用来存放同步函数的地方，只有此处可以改变state里的数据，此处形参一般为state+传入的值。

actions:用来存放异步函数的地方，一般涉及到axios发送请求，此处一般使用commit调用同步函数以达到更改state数据的目的，此处形参一般为context+传入的值，context可以点出commit和dispatch用以调用同步和异步函数。

getters:类似computer计算属性，此处函数形参一般为state，不涉及state时可以不加。

modules:当模块化后，index文件中一般不会存有以上四种，只留下该模块，以求高维护性。

注：当开启模块化后，一定要在模块内加上namespaced:true,开启命名空间，否则模块不会生效

如何调用VueX中的数据与函数？

1.没有模块化之前

原始方式

获取state数据：$store.state.变量名

使用同步函数：$store.commit('函数名')

使用异步函数：$store.dispatch('函数名', 【实参】)

获取计算属性：$store.getters['计算属性名']

注：

1.函数可以传递参数，无论同步异步，有参数传递时用逗号隔开即可

2.VueX里的函数只接收一个参数，当有多个参数需要传递时，请使用对象或数组的形式传递

辅助函数方式

首先

        辅助函数需要导入，需要那个辅助就导入那个

        import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

其次

        mapActions和mapMutations这两个使用时需要在methods中

        mapState和mapGetters这两个使用时需要在computed中

获取state数据：变量名

使用同步函数：@click="函数名"

使用异步函数：@click="函数名（参数）"

获取计算属性：计算属性名

methods: {

    ...mapMutations(['函数名']),

    ...mapActions(['函数名'])

  },

  computed: {

    ...mapState(['变量名']),

    ...mapGetters(['计算属性名'])

  }

2.模块化后

原始方式

获取state数据：$store.state.模块名.变量名

使用同步函数：$store.commit('模块名/函数名')

使用异步函数：$store.dispatch('模块名/函数名', 【实参】)

获取计算属性：$store.getters['模块名/计算属性名']

辅助函数方式

获取state数据：变量名

使用同步函数：@click="函数名"

使用异步函数：@click="函数名（参数）"

获取计算属性：计算属性名

methods: {

    ...mapMutations('模块名', ['函数名']),

    ...mapActions('模块名', ['函数名'])

  },

  computed: {

    ...mapState('模块名', ['变量名']),

    ...mapGetters('模块名', ['计算属性名'])

  }