什么是Vuex?

Vuex是Vue的状态管理工具 状态就是数据 可以帮我们管理Vue通用的数据(多组件共享的数据)

Vuex的优势

*共同维护一份数据 数据集中化管理

*响应式变化

*操作简洁(Vuex提供了一些辅助函数)

Vuex的使用

1.安装:npm i vuex@3

2.新建store/index.js 专门存放vuex

3.创建仓库store/index.js

4.在main.js中导入挂载到Vue实例上

State状态

state提供唯一的公共数据源 所有共享的数据都要统一放到store的state中存储 在state对象中可以添加我们想要共享的数据

如何访问Vuex中数据?

1.通过$store直接访问 — > { { $store.state.count } }

可以把state属性定义在组件内的计算属性中 调用时会方便很多

但每次都像这样一个个提供计算属性太麻烦了 我们还有更简单的语法帮我们获取state中的值

2.通过辅助函数mapState获取

(1) 导入mapState(mapState是Vuex中的一个函数)

(2) 采用数组形式引入state属性

返回的是一个对象 包含计算属性成员 (就是一堆下面的东西组成的对象)

(3) 利用展开运算符将导出的状态映射给计算属性

Vuex遵循单向数据流

组件中不能直接修改仓库的数据 如果直接修改整个项目难以维护(数据变了都不知道在哪改的)

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

Mutations

mutations是一个对象 对象中存放修改state的方法

定义mutations

添加修改state方法

组件中提交mutations

通过这样的步骤就实现了state中数据的修改都是在store中进行 而不是在组件中修改 提高了项目的可维护性

mutation函数也可以带参数 (提交参数只能是一个 若要传多个 可以传递一个对象)

Vuex中值和组件中的input双向绑定

要求实时输入 实时更新 如下图

说到双向绑定 我们可能自然想到使用v-model 但这是错误的 因为我们刚刚提到在组件中不能修改store中数据的值 如果使用v-model 当改变input输入框内值时 根据双向绑定 就修改了store中数据的值

但我们知道v-model实际上是一个语法糖 由:value+@input组成 我们可以将这个步骤拆分

实现步骤

实现代码如下

辅助函数-mapMutations

它把位于mutations中的方法提取了出来

上面代码实现将mutations的方法导入methods中 等价于下面的代码

此时就可以通过this.addCount调用了

!注意!:Vuex中mutations中要求不能写异步代码 如果有异步ajax请求 应该放置在actions中

Actions

负责进行异步操作

定义actions

在组件中通过dispatch调用

actions实现步骤解析

辅助函数-mapActions

把位于actions中的方法提取出来 映射到组件methods中

getters

除了state之外 有时我们还需要从state中筛选出符合条件的一些数据 这些数据是依赖state的 此时会用到getters

例如 state定义了list 为1-10的数组 组件中需要显示所有大于5的数据 这里可以用到getters

定义getters

使用getters

(1) 原始方式

(2) 辅助函数-mapGetters

使用小结