Vuex的详细介绍及使用

#一.Vuex 是什么？

1.定义：

vuex 是一个 vue 的状态管理工具, 状态就是数据

我们的理解:

• vuex是一个插件工具，可以帮我们统一管理在各个组件中要用到的共享数据

• 之前如果要进行跨组件的数据通信:

  • 父传子，子传父

2.vuex解决什么问题?

• vuex 能解决 多组件共享数据 的问题, 非常方便便捷

3.什么样的数据, 适合存放到vuex?

• 多组件的 通用 的共用数据, 适合存到 vuex

4.vuex 具备什么优势?

• 响应式变化

• 操作简洁 (vuex提供了一些简化语法的辅助函数, 这些辅助函数, 需要熟练掌握)

#二.vuex的四大核心

1.state：

• State提供唯一的公共数据源

• 所有共享的数据都要统一放到Store中的State中存储

• state 状态, 即数据, 类似于vue组件中的data

• 区别在于 data 是组件自己的数据, 而 state 中的数据整个vue项目的组件都能访问到

如何在组件中获取count?

1.原始型---插值表达式：<h1>state的数据 - {{ $store.state.count }}</h1>

*组件中可以使用 this.$store 获取到vuex中的store对象实例，然后通过state属性获取count

2.辅助函数 - mapState：

用法 ：

第一步：导入mapState ： import { mapState } from 'vuex'

第二步：利用展开运算符将导出的状态映射给计算属性

computed: {

...mapState(['count']) }

</h1>state的数据：{{ count }}</h1>

2.mutations:

概念：

通过 strict: true 可以开启严格模式

state数据的修改只能通过mutations，并且mutations必须是同步的

1.提供mutation函数

mutations: { ... inputCount (state, count) { state.count = count } },

2.注册事件

<input type="text" :value="count" @input="handleInput">

3.提交mutation

handleInput (e) { this.$store.commit('inputCount', +e.target.value) }

*提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

this.$store.commit('inputCount', { count: e.target.value })

2.辅助函数 - mapMutations

3.导入

import { mapMutations } from 'vuex'

4.利用展开运算符将导出的状态映射给methods

methods: { ...mapMutations(['inputCount']) }

3.actions

actions负责进行异步操作(比如: 网络请求, 定时器)

---

（1.）定义actions

actions: { setAsyncCount (context, num) { // 一秒后, 给一个数, 去修改 num setTimeout(() => { context.commit('inputCount', num) }, 1000) } },

1.原始调用 - $store (支持传参)

setAsyncCount () { this.$store.dispatch('setAsyncCount', 200) }

2.辅助函数 -mapActions

import { mapActions } from 'vuex' methods: { ...mapActions(['setAsyncCount']) }

直接调用:<button @click="setAsyncCount(200)">+异步</button>

4.getters

*getters类似于state的计算属性（可以认为是 store 的计算属性）

---

（1）定义getters

getters: { // getters函数的第一个参数是 state // 必须要有返回值 filterList: state => state.list.filter(item => item > 5) }

1.原始方式 -$store

​

{{ $store.getters.filterList }}

​

2.辅助函数 - mapGetters**

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

​

{{ filterList }}

​

三.模块：module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

四.辅助函数的调用

1.state，getters在计算属性computed里面

2.mutations，actions在methods方法里面