vuex

目录

1.什么是vuex

1.1Vuex大致可分成五个部分：

2. vuex使用步骤

2.1 安装

2.2 创建store模块，分别维护state/actions/mutations/getters

2.3在index.js中引入vue和vuex,分别导入其他相应模块state/actions/mutations/getters

 2.4在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

 2.5在main.js中导入并使用store实例

 2.6vuex实例的使用

1.显示state模块中所定义的属性

2.mutations(setXxx)处理数据的唯一途径，state的改变或赋值只能在这里

3. actions数据的同步异步(async) *** 作

---

1.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可 *** 作

1.1Vuex大致可分成五个部分：

1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步 *** 作
5.Module：将vuex进行分模块

2. vuex使用步骤 2.1 安装

npm install vuex -S

此处需要注意：可以@加版本，指定安装版本，否则可能会引起版本冲突，导致vuex安装不成功

2.2 创建store模块，分别维护state/actions/mutations/getters

 

2.3在index.js中引入vue和vuex,分别导入其他相应模块state/actions/mutations/getters

 2.4在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

 2.5在main.js中导入并使用store实例

 2.6vuex实例的使用 1.显示state模块中所定义的属性

 方式一：

 使用插值的方式插入页面

 

 虽然使用这种方法可以在页面中显示tate模块中所定义的属性，但是不推荐这种方式

所以在这里我给大家准备了第二种方式：

方式二：

getters.js获取数据并渲染

 

将值插入到页面 

 

2.mutations(setXxx)处理数据的唯一途径，state的改变或赋值只能在这里

同步方式

---

同步模式，即上述所说的单线程模式，一次只能执行一个任务，函数调用后需等到函数执行结束，
返回执行的结果，才能进行下一个任务。如果这个任务执行的时间较长，就会导致「线程阻塞」 

 在页面中定义一个按钮

 定义事件

mutations中方法的调用方式不能直接调用this.$store.mutations.setResturantName('KFC')，必须使用如下方式调用：this.$store.commit(type,payload);

 结果：

数据双向绑定，page1和page2数据同步

 

3. actions数据的同步异步(async) *** 作

异步方式（静态）

异步模式，即与同步模式相反，可以一起执行多个任务，函数调用后不会立即返回执行的结果，
如果任务A需要等待，可先执行任务B，等到任务A结果返回后再继续回调。 

---

 定义actions.js

 actions中方法的调用方式语法如下：

 异步方式（动态）

---

首先准备后台接口

配路径 

 

 编写动态异步方法：

在actions.js中定义setHotalnameDynamic方法：

 

 可能出现的问题：

VUEX 的 actions 中无法获取到 this 对象？

如果要在actions 或者 mutations 中使用this对象。可以在调用的时候把this对象传过去

  

这样就可以直接调用了