什么是vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状
态,并以相应的规则保证状态以一种可预测的方式发生变化。
vuex能够帮助我们解决什么问题?
vuex能够帮助我们解决组件之间数据传递或者共享的问题
vuex的深入理解?
Vue 应用中的每个组件在 data() 中封装着自己数据属性,而这些 data 属性都是私有的,完全隔离的。 如果我们希望多个组件都能读取到同一状态数据属性,或者不同组件的行为需要更新同一状态数据属 性, 这就需要一个将共享的状态数据属性进行集中式的管理。 这就是 Vuex 状态管理所要解决的问题。
如何使用vuex?
3.1 安装vuex
cnpm install vuex -save
3.2 在src目录下创建store文件夹
3.3 在store文件夹内创建index.js文件
3.4 在index.js 文件内引入 vue 和vuex
import Vue from "vue" //引入vue实例
import Vuex from "vuex" //引入vuex实例
3.5 注册vuex Vue.use(vuex);
3.6 对vuex进行实例化
const store = new Vuex({
核心配置
})
3.7 导出vuex
export default store
3.8 在main.js文件中引入store文件夹内的index.js文件 import store from "./store"
3.9 将store配置到vue实例中
new Vue({
router,
store,
render: h => h(App)
})
vuex的核心
4.1 state的作用
state : 保存初始化的一些状态(数据)
4.2 在组件中如何获取state的状态
//全局:
$store.state.定义的属性
//局部:
this.$store.state.定义的属性
4.3 mutations的作用 定义改变state状态的方法
4.4 在组件中如何调用mutations内定义的方法
//全局:
$store.commit("方法名")
//局部:
this.$store.commit("方法名")
4.5 actions的作用
4.5.1 通过actions里面定义的方法去触发在mutations里面定义的方法,并间接的改变state的状态
**4.5.2 在actions进行异步操作 **
什么是异步操作?
当一个程序没有执行完成,并不影响下面程序的执行,这个时候我们把它称之为异步操作
如何将一个程序编程异步操作?
1.定时器
2.promise
3.async await
什么是同步操作?
当一个程序没有执行完成的时候,下面的程序不能执行,当上面的程序执行结束,下面的程序才可以执行
1.for循环
2.函数
3.通过promise对象可以进行异步操作
4.6 在组件中如何调用actions里面定义的方法
全局:
$store.dispatch("方法名",载荷) // 这里的载荷其实指的是要传递的参数
局部:
this.$store.dispatch("方法名",载荷)
4.7 modules的作用是什么
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)
每个模块拥有自己的 state、mutation、action、getter 等