Vuex全局状态管理

一、Vuex概念

• 如果遇到组件间嵌套层次较多，比较复杂得化，多个组件之间共有一个数据，使用组件传值处理起来得话，就比较麻烦

• vuex 是vue 配套的数据管理工具，我们可以将组件共享数据保存到vuex 中，方便整个程序中得任何组件都可以获取和修改 vuex 中保存得公共数据

二、Vuex的安装

2.1 项目安装

（1）创建新项目

（2）选择Vuex选项

2.2 单独安装

npm install vuex --save  // 安装

三、Vuex的核心概念

在新建的项目文件src/store/index.js文件中有这样一段代码

接下来我们一步一步解读。

3.1  state模块

3.1.1  概念

提供全局唯一得公共数据源，所有的共享数据都要放在store 中得state 进行存储。 可以理解相当于 组件中的data

 3.1.2  调用

方法一：组件中访问state 中得值

this.$store.state.数据名称

方法二：组件中访问state 中得值 ，使用mapState 辅助函数。（注意，一定要在computed属性中写）

  import {mapState} from 'vuex'  // 从vuex 中按需导入
  computed:{
			...mapState(['num'])，// 将该组件需要的vuex中得全局数据映射到该组件计算属性中
		},

运行结果：

3.2  getters模块

3.2.1  概念

用于对store中得数据进行加工处理成新的数据。类似与vue 得计算属性。

注意：store中得数据发生变化时，则getter 中对应的数据也发生变化。getter不会修改store 中得数据，只是包装

3.2.2  使用方法

方法一：

<p>{{this.$store.getters.方法名 }}</p>

方法二：

import {mapGetters} from 'vuex'
computed:{
	...mapGetters(['formatCount'])  // 将vuex中的getters方法映射到组件中计算属性中
}

运行结果：

 3.3  mutations模板

3.3.1  概念

同步修改state中的数据, 通过mutations 修改数据虽然繁琐一些，但是可以集中监控所有数据得变化。

注意： 只能通过mutations 修改store中得数据，不能直接修改store得数据，且要在methods中写。

3.3.2  使用方法

方法一：

this.$store.commit(“add”)  // 不传参
this.$store.commit(“addStep”,10) // 传参

方法二：

import {mapMutations} from 'vuex'
methods:{
    ...mapMutations(['sub','subStep']),  // 将vuex 中sub和subStep方法映射到组件的methods 中
}

运行结果：

3.4  actions模板

3.4.1  概念

异步修改state 中得数据

注意： action 不能直接修改state中的数据，需要间接通过触发mutation中得方法修改数据，也要在methods中写。

3.4.2  使用方法

 方法一：

this.$store.dispatch(“addAsync”)  // 不传参
this.$store.dispatch(“addStepAsync”,10) // 传参

方法二：

import {mapActions} from ‘vuex’
methods:{
	...mapActions(['subAsync','subStepAsync'])// 将vuex 中subAsync和subStepAsync方法映射到组件的methods 中
}

运行结果：

 3.4  modules模板

3.4.1 概念

概念： 如果项目中使用单一的模块，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿，vuex 允许我们将 store 分割成多个模块（module）。每个模块拥有自己的 state、mutation、action、getter

注意： 分模块开发时，必须给每个模块设置命名空间 namespaced:true

3.4.2 使用方法

大致的使用法方法与上文大致相似，有些语法需要注意。

// state数据调用

1. this.$store.state.user.count

2.  ...mapState('user',['count'])

// getters数据调用

1.this.$store.getters['user/getCount']  注意：

2....mapGetters('user',['getCount']),

// mutations 修改数据

1. this.$store.commit('user/函数名'，参数)

2. ...mapMutations('user',['increase'])

// actions 修改数据

1. this.$store.dispatch('user/函数名'，参数)

2. ...mapActions('user',['increase'])