store文件夹 vue_Vue 中 store 基本用法

本文介绍了在Vue中如何使用Vuex的Store,包括如何创建和导入store,以及如何通过getters和mutations进行全局状态的获取和修改。通过示例展示了在组件中调用$store.getters和$store.commit的方法。
摘要由CSDN通过智能技术生成

这个文件就不需要太多东西了,创建之后,在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文件,然后引入这里

}

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值