Vue 中 store 基本用法
最近在使用vue的过程中,遇到一个需求,就是需要在不同路由中使用同一个会改编的参数,也就是需要一个全局参数,一看见全局,不就是使用window呗。可是既然已经使用vue了,当然要研究一下vue里面怎么实现的。于是简单了解了一下store。
首先,我的需求比较简单,只是全局变量,但是在我查找各种资料的时候发现看不懂。。。这就尴尬了,而且大部分的文章都是讲述store的状态管理,理解store,但是找了一上午,还真的没有看到该怎么使用,怎么声明一个最简单的store,怎么存入全局变量,怎么获取全局变量。然后自己看了一下官方的store文档资料,决定自己先写一个最简单的使用方法。
首先,我们需要声明一个store的index.js文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//这里放全局参数
},
mutations: {
//这里是set方法
},
getters: { //这里是get方法 },
actions: {
//这个部分我暂时用不上
},
modules: {
//这里是我自己理解的是为了给全局变量分组,所以需要写提前声明其他store文件,然后引入这里
}
})
这就是一个最简单的store文件格式了。
然后根据我们的变量分组,我新建了一个module文件夹
![](http://upload-images.jianshu.io/upload_images/6898325-c24044b2ecfd357f.png?imageMogr2/auto-orient/strip|imageView2/2/w/290/format/webp)
我在里面新建了一个demo文件:
export default {
state: {
//属性
demoValue:{}
},
getters: {
getDemoValue: state => state.demoValue
},
mutations: {
//set方法
setDemoValue(state,demoValue){
state.demoValue = demoValue
}
}
}
这个文件就不需要太多东西了,创建之后,在index中通过import引入,然后在module中申明就好了
现在前置准备做好了,怎么使用呢?这个才是重点。
经过我测试,最开始的时候我也是胡乱在弄,直接在需要调用的地方写:
this.$store.demo.setDemoValue(value);
this.$store.demo. getDemoValue ;
当然是给我报错,提示undefined。于是我断点去看我的$store里面到底有什么东西。这一看不要紧呀。发现里面根本没有我的demo属性对象。。。但是在$store里面直接有个getter,打开看,居然就是我demo里面的getDemoValue 方法执行后的返回值,也就是说getter里面的东西是我申明的getter里面方法的返回值,现在如何取值解决了:
this.$store.getters. getDemoValue
这样能直接获取我的全局变量demoValue的值,那么如何修改,或者说怎么存入呢?我在$store里面也没有看见mutations这个属性呀。但是有个commit,是一个方法,这不是提交吗?试一下。
这个方法有两个参数,于是有了以下:
this.$store.commit('setDemoValue', value);
别说。这还真是对的。经过这一番测试,发现。在全局变量的存取过程中,根本就跟我声明的demo.js文件的名字,还有我在index.js中module里面引入的demo的命名没有半点关系。。
现在总结一下使用方法:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//这里放全局参数
demoValue:{}
},
mutations: {
//这里是set方法
setDemoValue(state,demoValue){
state.demoValue = demoValue
}
},
getters: {
//get方法
getDemoValue: state => state.demoValue
},
actions: {
//这个部分我暂时用不上
},
modules: {
//这里是我自己理解的是为了给全局变量分组,所以需要写提前声明其他store文件,然后引入这里
}
})
使用的时候get方法和set方法分别是:
this.$store.commit('setDemoValue', value);
this.$store.getters. getDemoValue
当然。我只是把这个当成一个全局变量在使用,没有使用很多同步异步的功能,还有什么状态管理都没有管,先用上了再说吧,其他大佬肯定不会像我这么暴力的使用。。。
作者:嘻哈哈_95fe
链接:https://www.jianshu.com/p/eb23c72ab02a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。