Vuex的核心概念-优快云博客

本文链接：https://blog.youkuaiyun.com/chenshanqiang/article/details/103705963

1. State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

创建store数据源，提供唯一公共数据

const store = new Vuex.Store({
 	state: { count: 0 }
 })

1.1 组件访问 State 中数据的第一种方式：

this.$store.state.全局数据名称

1.2 组件访问 State 中数据的第二种方式：

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

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

// 2. 将全局数据，映射为当前组件的计算属性
computed: {
 ...mapState(['count'])
}

2. Mutation

Mutation 用于变更 Store中的数据。

只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

定义 Mutation

 const store = new Vuex.Store({
	 state: {
	 	count: 0
	 },
	 mutations: {
		 add(state) {
			 // 变更状态
			 state.count++
		 },
		 addN(state, step) {
 			// 变更状态
 			state.count += step
 		 }
	 }
 })

2.1 触发mutations的第一种方式：

this.$store.commit() 是触发 mutations 的第一种方式

 methods: {
    handle1() {
   	 // 触发 mutations 的第一种方式
   	 this.$store.commit('add')
    },
    handle2() {
   	 // 在调用 commit 函数，
   	 // 触发 mutations 时携带参数
   	 this.$store.commit('addN', 3)
	 }
}

2.2 触发mutations的第二种方式：

// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：

// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
 ...mapMutations(['add', 'addN'])
}

3. Action

Action 用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发
Mutation 的方式间接变更数据。

定义 Action

 const store = new Vuex.Store({
	 // ...省略其他代码
	 mutations: {
		 add(state) {
		 	state.count++
		 },
		 addN(state, step) {
		 	state.count += step
		 }
	 },
	 actions: {
		 addAsync(context) {
			 setTimeout(() => {
			 	context.commit('add')
			 }, 1000)
		 },
		 addNAsync(context, step) {
			 setTimeout(() => {
			 	context.commit('addN', step)
			 }, 1000)
 		 }
	 }
 })

3.1 触发 Action的第一种方式：

 methods: {
	 handle1() {
		 // 触发 actions 的第一种方式
		 this.$store.dispatch('addAsync')
	 },
	 handle2() {
		 // 触发 actions 时携带参数
 		this.$store.dispatch('addNAsync', 5)
 	 }
 }

3.2 触发 Action的第二种方式：

// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

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

// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
 ...mapActions(['addASync', 'addNASync'])
}

4. Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据，不更改源数据

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
Store 中数据发生变化，Getter 的数据也会跟着变化

定义 Getter

 const store = new Vuex.Store({
	 state: {
	 	count: 0
	 },
	 getters: {
		 showNum: state => {
		 	return '当前最新的数量是【'+ state.count +'】'
		 }
	 }
 })

4.1 使用 getters 的第一种方式：

this.$store.getters.名称

4.2 使用 getters 的第一种方式：

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

在实例的应用

/* jshint esversion: 6 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        showNum(state) {
            return '当前最新的数量是【' + state.count + '】'
        }
    },
    mutations: {
        add(state) {
            state.count++
        },
        addN(state, step) {
            state.count += step
        },
        sub(state) {
            state.count--
        },
        subN(state, step) {
            state.count -= step
        }
    },
    actions: {
        // 在actions中不能直接修改state中的数据，
        // 必须通过context.commit()触发mutations中的函数修改state中的数据
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        },
        addNAsync(context, step) {
            setTimeout(() => {
                context.commit('addN', step)
            }, 1000)
        },
        subAsync(context) {
            setTimeout(() => {
                context.commit('sub')
            }, 1000)
        },
        subNAsync(context, step) {
            setTimeout(() => {
                context.commit('subN', step)
            }, 1000)
        }
    }
})

第一种触发方式：

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.count}}</h3>
    <h3>{{$store.getters.showNum}}</h3>
    <button @click="btnHandler1">+1</button>
    <button @click="btnHandler2">+N</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+N Async</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      // commit的作用就是调用mutation的某个函数
      this.$store.commit('add')
    },
    btnHandler2() {
      this.$store.commit('addN', 3)
    },
    btnHandler3() {
      // dispatch专门触发action
      this.$store.dispatch('addAsync')
    },
    btnHandler4() {
      this.$store.dispatch('addNAsync',4)
    }
  },
  created() {},
  computed: {}
}
</script>
<style lang="less" scoped>
</style>

第二种触发方式：

<template>
  <div>
    <h3>当前最新的count值为：{{count}}</h3>
    <h3>{{showNum}}</h3>
    <button @click="sub">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subNAsync(4)">-N Async</button>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync'])
  },
  created() {},
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  }
}
</script>
<style lang="less" scoped>
</style>