安装 vuex

yarn add vuex 或 npm i vuex

vuex 组成api

vuex全局状态管理器，目的为了解决跨层级组件通信

strict

开启严格模式，默认是非常严格的 mutations如何执行异步代码？ 非严格模式下执行异步代码

严格和非严格区别？ 默认严格不能执行异步代码,会报错 非严格模式下执行mutations异步代码

state

存储全局状态，数据双向响应 等价于组件里的data

getters

用于对state进行计算，返回一个新值，等价于组件里的computed

mutations

唯一用于修改state的方法，且只能执行同步代码。使用commit方法调用 自动被注入state参数

actions

用于执行异步操作的方法，只能通过调用mutations来修改state，使用dispatch调用 自动被注入context对象参数

modules

模块化开发vuex

定义

• 举例：大型网站每个页面都是一套独立的数据共享，如果全部挂在到同一个state就不好控制
• 当项目是多人开发的时候，拆分模块就显得尤为必要
• 所以模块化是为了【解决大型项目中独立共享状态的】

默认使用

默认情况下，只有state拥有作用域对象。其他的1部分自动提升到根模块上。所以为了避免发生命名冲突，要使用命名空间

命名空间

在独立的模块化中使用namespaced设置为true，在使用该模块中除了state之外，其他的部分名字前面自动拼接上模块名称：类似于路径一样name/getter

语法和示例

1.调用state $store.state.name.stateItem 2.调用getters $store.getters[‘name/getterItem‘] 3.调用mutations $store.commit(‘name/mutation‘,...) 4.调用actions $store.dispatch(‘name/action‘,...)

createNamespacedHelpers

创建命令空间的助手函数,方便让当前组件的所有store里的独立资源，都是来自于同一个store模块里的。

vuex执行|工作流程

state到组件，组件通过dispatch调用actions进行通信，actions通过commit调用mutations修改state，state是双向数据响应的，会自动让组件更新。

辅助函数

所有api前面加map

vuex 常用知识

原文：https://www.cnblogs.com/2773037489-qq/p/14844563.html