浅谈vuex

173 阅读2分钟

一、vuex是什么

  • Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。 优点: 能够在Vuex中集中管理共享的数居,易于开发和后期维护 能够高效地实现组件之间的数据共享,提高开发效率 存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步

1.0 vuex的安装

npm install  vuex  -S

1.1 vue组件

a.jpg

  • state属性是Vuex中用于存放组件之间共享的数据;也就是说,我们把一些组件之间共享的状态主要存放在state属性中;它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。

  • -Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

  • 更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

  • action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。首先mutations中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store没有监听到数据的更新

1.2 基础存、取数据

在项目中方便后期维护通常我们进行分模块管理

moki.jpg

loko.jpg

取vuex数据

menus为当前的模块名字,username为vuex里state的变量名字 km.jpg

通过调用mutations里的方法来操作数据

页面需要通过 this.$store.commit触发vuex中mutations里面的函数。menus为模块名字,mu_setusername为mutations里的函数名字 l.png

ko.jpg

通过调用actions里的方法来操作数据

页面需要通过 this.$store.dispatch去触发vuex中actions里面的函数。actions里的async_setusername方法触发后会触发mutations的mu_setusername方法

hao.jpg

ni.jpg