PHP试题网_免费网络PHP试题测试平台,PHP试卷调查,PHP试卷模板、PHP考试测验
公告: 【20201211】公告:复杂试卷成功上线,问答模块很快上线……网站将有诸多变化

17. 状态管理Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,如果需要构建是一个中大型单页应用,就需要考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择,下面介绍一下Vuex的用法。

第一步:创建store

(1). 在页面文件中新建一个store.js文件,引入vue和vuex,并声明使明vuex。

(2). 在store.js里声明state,用来存放组件之间共享的数据。

如果页面的数据较多的时候可以在另外一个文件保存数据,然后在store.js里引入。

(3). 在store.js里声明getters,有点类似于计算属性,改变state里的数据的时候会触发getters里的方法,获取新数据。

有时候,我们需要对state的数据进行筛选或过滤,这些操作都是在组件的计算属性进行的, 如果多个组件需要用到筛选后的数据,那我们就必须到处重复写该计算属性函数;或者将其提取到一个公共的工具函数中,并将公共函数多处导入 ,这两种方法都不太理想,但是如果把数据筛选完在传到计算属性里就不用那么麻烦了,getters就是用来干这个的,getters下的函数接收接收state作为第一个参数。

(4). 在store.js里声明mutations,主要用来存放方法,这些方法用于改变state里的数据。

mutations下的函数接收state作为参数,接收payload(载荷)作为第二个参数,这个参数用来记录开发者使用该函数的传递的信息,以便用这些信息作为参数和依据改变state,需要注意的是:mutations方法必须是同步方法。

(5). 在store.js里声明actions,用于异步改变state里的数据。

actions和mutations的区别

(1). actions 提交的是 mutations,而不是直接变更状态。也就是说,actions会通过commit提交mutations,让mutations帮他提交数据的变更。

(2). action 可以包含任意异步操作,ajax、setTimeout、setInterval均可以操作。
 

第二步:引入store

第三步:使用store

如果希望可以简化写法,还可以使用vuex的辅助函数,matState、、mapGetters、mapAcions、mapMutations来映射和操作数据

 



作者:OK兄 浏览次数:1