Vuex的详解与使用 – 源码巴士

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

例如：你有几个数据，几个操作，在多个组件上都需要使用，如果每个组件都去调用都是写，就会很麻烦，代码又臭又长。当然如果没有大量的操作和数据需要在多个组件内使用的话呢，其实也就可以不用这个 Vuex了。看个人吧！

Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

一、注册store

1、首先为了项目格式便于维护和相对规范一点，我们先在目录下建立一个 store 文件夹，并且在下面建立一个 store.js 文件（有些项目会命名为index.js）

在这里插入图片描述

2、先引入 Vue 和 Vuex ，并且别忘了 Vue.use(Vuex)

在这里插入图片描述
在src/main.js文件里引入store

二、state

1、现在开始 Vuex 的主宰部分 new Vuex.Store（{}）

在这里插入图片描述
在这张图上可以清楚的看到 new Vuex.Store 里面有一个 state: { } ，注释也写了。
这是你要设置的全局访问的 state 对象，也就是你需要 count 就丢个 count进去，需要 price 就丢个 price进去。
这里我丢了个 count 和 ChangeShowCom 两个不同的数据类型作为一个对比。

2、在页面中获取 state 里面的数据

通过 this.$store.state.count 可以拿到 state里面的 count 也就是0
在这里插入图片描述

三、getters

getters 和组件的 computed 类似，方便直接生成一些可以直接用的数据。当组装的数据要在多个页面使用时，就可以使用 getters 来做

在这里插入图片描述
注释也写了，getters 可以实时监听state值的变化(最新状态)
我给getters里面获取count值的方法命名为 getCount 并且需要传入 state
同理，通过 this.$store.getters.getCount 可以在页面获取 count 值。

四、mutations

通过 mutations 修改 store 中的值

我们现在Hello World.vue文件中添加两个按钮，一个加1，一个减1；
这里我们点击按钮调用add（执行加的方法）和del（执行减法的方法），然后在里面直接提交mutations中的方法修改值：
在这里插入图片描述
修改store.js文件，添加mutations，在mutations中定义两个函数，用来对count加1和减1，
这里定义的两个方法就是上面commit提交的两个方法，如下：

我们可以将参数传递给 mutations 中的函数进行计算，这里是 num
现在我们看看效果：
在这里插入图片描述
很好，count 数值都发生了改变，我点击了两下，并且是可以在 Vue Devtools 中的 Vuex 看到过程效果

payload ：1 就是数值变化1
type : “addCount” 操作的方法是 addCount，也就是 mutations 根方法

五、Actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

我们来看一下：
在这里插入图片描述
然后我们去修改Hello World.vue文件：
这里我们把commit提交mutations，修改为使用dispatch来提交actions
我们点击页面，效果是一样的。

现在让我们来看看效果，这里我又点击了6下，很显然，效果是一样的。

六、modules

可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules: {
        moduleA,
        moduleB
    }
})

moduleA.js / moduleB.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后我们就在组件里这么调用就可以了

<template>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</template>

computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    //或
	...mapState({
		getText2: state => state.moduleB.text;
	})
}

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。

七、辅助函数 mapState、mapGetters、mapActions

1、…mapState、…mapGetters

如果我们不喜欢这种在页面上使用 this.$stroe.state.count 和 this.$store.dispatch(‘funName’) 这种很长的写法，
那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；
并且我们配合 … 拓展符一起使用。
在这里插入图片描述

正常显示，效果是一样的，我们就可以不再使用很长的写法来调用了。

2、…mapActions