Vue全局变量的定义和使用，创建 Store变量、读取、修改

在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)

读写完整代码