在VUE中,当需要各js、各页面都能读写的全局变量时,可以用store变量,从定义到使用的方法如下
一.定义变量,例:我们定一个全局变量gxh
找到 vue的/ src/ store路径, 在 modules文件夹下创建文件gvar.js
在gvar.js中,需要包含 state、 mutations、actions三个代码块
· state: 定义变量
· mutaions: 在 Vuex中用于改变 store的方法。
· actions: 触发mutations的异步操作, 从而更新 Vuex 的状态。
定义如下
state: {
gxh:0
},
mutation函数如下
//mutation函数接收两个参数:当前状态对象和需要变更的值。
mutations: {
//设置gxh变量的值。 state 当前状态对象, xh新值。
SET_XH: (state, xh) => {
state.gxh = xh
}
},
异步操作如下
actions: {
//用异步操作设置gxh变量的值
//函数接收两个参数:上下文对象和新值。
setXH({commit}, xh) {
commit("SET_XH", xh);
}
}
export default gvar
gvar.js完整代码如下
二、读取数值
1.在 getters. js中定义取值方法如下
const getters = {
gxh:state => state.gvar.gxh
}
export default getters
2.导出store对象
import Vue from 'vue'
import Vuex from 'vuex'
import gvar from '@/store/modules/gvar'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
gvar
},
getters
})
export default store
三、修改变量
1.引入 store , import store from"@/store"
2、调用 dispatch方法向变量写入新值,例写入3
store.dispatch("setXH", 3)
读写完整代码