个人笔记前端开发vuex的基本使用!()

1-vuex是什么?

 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

①:vue官方搭配,专属使用.

②:集中式管理数据状态方案.

③:响应式(数据变化可预测).

 2.vuex5个内容

①.state:统一定公共数据.

②.mutation:用来修改数据.

③.getters:类似computed.

④.actions:发起异步请求.

⑤:modules:拆分模块.(学习中)

2.1-state使用.

 07--在任意组件中，通过this.$store.state 来获取公共数据。

        在组件中，通过this.$store.state.属性名来访问。

   

 2.2--用mutations修改公共数据

调用mutations来修改定义在state中的公共数据

 格式:1.注册的格式 :

每一项都是一个函数，可以声明两个形参：

• 第一个参数是必须的，表示当前的state。在使用时不需要传入

• 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

 2.使用时的格式:

 这里commit是固定的方法

在定义时：

• 它的第一个参数是state，第二个参数是载荷

在调用时：

• 用 this.$store.commit('mutation名'， 载荷) 来调用

2.2.1-mutaions拓展理解

问：为啥是$store.commit('mutations的名字')而不是$store.mutations的名字()?

答：Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

问：数据不可以该在组件内部直接修改吗？

答：不能。虽然语法上不报错，也有响应式的特点。但是不推荐。特别是在严格模式下会报错。若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作，只要不经过 mutation的函数，vue就会报错

问：可以传递多个数据吗？

答：参数只能有一个：下面的写法是不对的：

this.$store.commit('setUrl', url, host) // host这个参数将无法被接收到 

如果希望传递复杂的数据，第二个参数可以是对象，例如下面的写法

this.$store.commit('setUrl', { url, host} )

3-发请求取数据做保存

要求:1.请求后端接口,2.保存数据到state中,3.数据渲染到页面

思路:组件created钩子函数中:1-发ajax请求(用axios库)，获取数据  2-调用mutations保存数据到vuex 3-在组件中使用数据

代码:

1--在app.vue（或者其他的组件）中，created钩子函数中的代码如下：

 2--在src/store/index.js中，补充对应的数据项 books和操作的方法。

 3.数据渲染到页面

 

4.用getters的派生状态

作用:在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

例如：计算所有图书总价:

 // state 就是上边定义的公共数据state

 格式:在组件中通过：$store.getters.getter的名字 来访问

4.1state-mutation-getters 小结

vuex维护公共数据，主要有两个动作：

1. 定义数据:

2. 提供获取/修改数据的方法

5.用actions发异步请求

我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：

• action中可以通过调用 mutation来修改state，而不是直接变更状态。

• action 可以包含任意异步(例如ajax请求)操作。

定义格式 

 调用格式:在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

///** action一般用来发异步请求，数据回来之后，在去调用mutations来保存数据

将ajax请求放在actions中有两个好处：

1. 代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。

2. 逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。