vue存取全局变量的方法(使用vuex的state实现)

爱被打了一巴掌 2024-03-23 10:09 81阅读 0赞

本人的项目中，vue想存取全局变量，用到了vuex。

在此简要总结下。

`(vuex的五个属性是：state、getters、mutations、actions和modules，这里先只总结用法)`

## 一、vue存取全局变量的方法 ##

1.从项目入口开始，本人的项目中，index.html附近，有个`main.ts`文件，内容如下：

import bootstrap from './bootstrap'
    
    bootstrap('#app')

2.上面引入的`bootstrap.ts`中，有这样的代码：

import store from './store/index'
    
    ......
    
    export default function mount(el: string) {
      return new Vue({
        store,
        router,
        render: h => h(App),
      }).$mount(el)
    }

其中，重要的是引入了`store`，然后在`new Vue`里也写了`({store})`。

3.这个引入的`/store/index.ts`中，是这样写的：

import Vue from 'vue'
    import Vuex, { StoreOptions } from 'vuex'
    import { RootState } from './types'
    
    Vue.use(Vuex)
    
    const store: StoreOptions<RootState> = {
      state: {
        version: '1.0.0',
        uploadUrl: ''
      },
      mutations: {
        "SET_UPLOADURL": function(state,url){
          state.uploadUrl = url
          console.log("保存上传url",url)
        }
      },
      getters: {
        "GET_UPLOADURL": function(state){
          console.log("返回上传url",state.uploadUrl)
          return state.uploadUrl
        }
      }
    }
    
    export default new Vuex.Store<RootState>(store)

其中，重要的是`state`，`mutations`，`getters`；  
`state`里的`uploadUrl`是可以存取的一个变量，先用这个举例子；  
`mutations`是保存变量的方法，是个同步方法（如果要异步可以用`actions`，这里先不详细写了）；  
`getters`是读取变量的方法。

4.这里插入下`types.ts`，上面用到了，这个的内容如下：

export interface RootState {
      version: string,
      uploadUrl: string,
    }

这个是上方`StoreOptions<RootState>`用到的，规定了state内变量的类型。

5.在vue的js部分中保存变量的方法：

this.$store.commit('SET_UPLOADURL','http://xxx.xxx.com/upload?filename=abc')

这个就可以把值存入`state`里的`uploadUrl`里。

6.在vue的js部分中读取变量的方法：

console.log(this.$store.getters.GET_UPLOADURL)

这样，就可以读取`state`里的`uploadUrl`，值就是刚才保存的`http://xxx.xxx.com/upload?filename=abc`

## 二、备注 ##

1.由于`new Vue({})`的时候在全局声明了`store`，因此可以用`this.$store`执行方法

2.`commit`和`getters`应该是框架里的固定方法