vue笔记六：vuex状态管理

---

一、初识vuex

1、什么是vuex
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

☆状态：数据


store钩子函数是在vuex下，实例化vuex实质是实例化store

2、vuex的下载和安装


☆计算属性是个方法，只不过在用的时候是个属性。

mapGetters方法：用于帮助我们映射getters中的数据为计算属性
mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。


组件中读取vuex中的数据：$store.state.sum组件中修改vuex中的数据：$store.dispatch(‘action中的方法名’,数据) 或 $store.commit(‘mutations中的方法名’,数据)
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

Vue.use安装vuex
export default暴露store方便外部引用

components：导入模板
template：使用模板







3、计数器案例




4、vuex状态管理模式

二、vuex配置选项

1、actions





actions中处理异步，延迟调用


2、mutations


通过commit第二个参数进行参数传递，通过mutations的第二个参数进行接收。
第二种传参方式：

此时param接收整个commit内容对象


3、getters





4、modules



对store.state.a的理解：


5、plugins


6、devtools

三、vuex中的API

1、模块注册

registerModule只能在store中使用


modules只能在实例化选项的时候添加，而registerModule对于任何可以拿到store的实例来说都可以使用。
2、状态替换

四、购物车案例

<router-view/>（路由占位符）进行占位

@指src文件夹

getGoodsList模拟网络请求

namespaced:命名空间

调用setList：

分模块的数据需要加上模块名：


toFixed（2）：保留两位小数

课后题：
1．请简要分析 Vuex 的设计思想。

用来管理状态，Vuex 作为 Vue 插件来使用，使 Vue 组件状态更加容易维护

2．简述 Vuex 配置对象中的主要内容有哪些。

1）. actions：用来定义事件处理方法，用于处理 state 数据

2）. mutations：选项中的事件处理方法接收 state 对象作为参数，即初始数据

3）. getters：store 实例允许在 store 中定义 getters 计算属性，类似于 Vue 实例的 computed

4）. modules：modules 用来在 store 实例中定义模块对象

5）. plugins：Vuex 中的插件配置选项为 plugins，插件本身为函数

6）. devtools：store 实例配置中的 devtools 选项用来设置是否在 devtools 调试工具中启用 Vuex，默认值为 true，表启用

3．简述 Vuex 中的 actions 的含义。

actions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。

在使用时，需要在 store 仓库中注册 actions 选项，在里面定义事件处理方法。事件处理方法接收 context 作为第1个参数，payload 作为第 2 个参数（根据需要进行选择）。