vuex,你可以理解为一个存放全局变量的仓库。在这里可以存放一些各个模块中通用的变量和属性。

在小项目中使用localstorage和session,
在大项目中使用vuex,解决了组件之间统一状态的共享问题,实现组件之间的数据持久化。在项目中可以用vuex存放数据,不用每次都要请求后端服务器,这就在保证了数据新鲜度的同时提高了使用性能。

前期配置工作:

1、src里新建vuex文件夹
2、vuex里新建一个store.js的文件(建议store名字不要变)
3、安装vuex cnpm i vue-x --save
4、新建的 store.js文件中引入vuex,并使用
5、定义数据(见vuex官方文档中的state)
6、定义方法(见vuex官方文档中的mutations)
7、暴露定义的store对象,即vuex的实例


在组件里使用vuex:
引入store.js
注册(在export default里注册),也就是声明一下
调用其中的变量:this.$store.变量名
使用其中的方法:this.$store.commit('inCount');

vuex中的getters:类似于计算属性,改变state里面的count数据的时候会触发gettrs里面的方法,获取新的值
调用:{{this.$store.getters.computedGetters}}

vuex中的actions,异步调用其中方法
调用:this.$store.dispatch('incrementAsync');

*注意,需要暴露actions,getters和state方法。

 

Logo

前往低代码交流专区

更多推荐