Vuex中一些主要方法的使用（State，Mutation，Action，Getter）

State访问数据方式一： {{$store.state.count}}

store.js中用state定义数据count

export default new Vuex.Store({
  state: {
    count: 0
  }
     })

在组件中用 {{$store.state.count}} 读取数据count

<template>
    <h1>{{$store.state.count}}</h1>
</template>

State访问数据方式二： mapState

在reduce.js组件导入mapState函数

import { mapState } from "vuex";

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

 computed: {
    ...mapState(["count"])
  }

使用count数据时直接{{count}}使用count

<template>
  <h1>数据：{{count}}</h1>
</template>

触发mutations方法方式一：this.$store.commit（）

在store.js文件新建一个mutations方法，定义addd()方法用于给数据count递增

mutations: {
    addd(state) {
      state.count++
    }
 }

在add.vue组件我们新建个button按钮用于触发click点击事件

<template>
  <div>
    <h1>{{$store.state.count}}</h1>
    <button @click="handle">+1</button>
  </div>
</template>

然后在methods方法中调用handle()方法，handle()方法中用this.$store.commit() 调用store.js中的addd() 的递增方法

methods: {
    handle() {
      this.$store.commit("addd");
    }
  }

点击button按钮即可实现count数据改变（不要用$store.state.count直接去对数据进行改变，这是不规范的，必须要用mutations方法）

触发mutations方法的第二种方式：mapMutations

新建一个按钮点击事件

<button @click="handle">+1</button>

在 vuex 中按需导入 mapMutations 函数

import { mapState, mapMutations } from "vuex";

将指定的 mutations 函数映射为当前组件的 computed 计算属性

 computed: {
    ...mapState(["count"]),
    ...mapMutations(["addd"])
  },

handle方法在methods中调用

methods: {
    handle() {
      this.addd();
    }
  }

触发Actions方式一： this.$store.dispatch()

在store.js中用 actions 创建一个延时器(add是mutations中的一个方法)

 actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('addd')
      }, 1000)
    }
  }

在组件中使用 this.$store.dispatch() 调用异步方法(handle是按钮一个点击事件)

methods: {
    handle2() {
      this.$store.dispatch('addAsync')
    }
  }

触发Actions方式二：mapActions

在 vuex 中按需导入 mapActions 函数

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

通过导入的mapActions函数，将需要的actions函数，映射为当前组件的 methods 方法

methods: {
    ...mapActions(['subAsync''])
  }

handle方法在methods中调用

methods: {
    handle2() {
      this.subAsync()
    }
  }

读取Getter方式一：$store.getters.showNum

Getter用于对Store中的数据进行加工处理形成新的数据
1、Getter可以对Store中已有的数据进行加工处理形成新的数据，类似于Vue的计算属性
2、Store中数据发生变化，Getter的数据也跟着发生变化

定义Getter

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum(state) {
      return '当前最新数量是【' + state.count + '】'
    }
  }
})

使用Getter

<template>
   <h3>{{$store.getters.showNum}}</h3>
</template>

使用Getter方式二：mapGetters

导入mapGetters

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

计算属性中调用Getter

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

渲染到页面

<template>
    <h3>{{ showNum }}</h3>
</template>

这里是详细代码资料
Vuex就是这么简单，有手就能学废！