一、vuex是什么
- Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。 优点: 能够在Vuex中集中管理共享的数居,易于开发和后期维护 能够高效地实现组件之间的数据共享,提高开发效率 存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
1.0 vuex的安装
npm install vuex -S
1.1 vue组件
-
state属性是Vuex中用于存放组件之间共享的数据;也就是说,我们把一些组件之间共享的状态主要存放在state属性中;它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。
-
-Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
-
更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
-
action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。首先mutations中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store没有监听到数据的更新
1.2 基础存、取数据
在项目中方便后期维护通常我们进行分模块管理
取vuex数据
menus为当前的模块名字,username为vuex里state的变量名字
通过调用mutations里的方法来操作数据
页面需要通过 this.$store.commit触发vuex中mutations里面的函数。menus为模块名字,mu_setusername为mutations里的函数名字
通过调用actions里的方法来操作数据
页面需要通过 this.$store.dispatch去触发vuex中actions里面的函数。actions里的async_setusername方法触发后会触发mutations的mu_setusername方法