vue添加使用全局变量

最新推荐文章于 2025-06-13 10:05:56 发布

转载最新推荐文章于 2025-06-13 10:05:56 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ttyypjt/p/11012876.html

文章标签：

#javascript #ViewUI

一、安装vuex

npm install vuex --save

二、创建全局变量配置文件

cd src
mkdir store

然后创建store.js文件

三、倒入store.js文件

在main.js文件中添加

import Vuex from 'vuex'
import store from './store/store'

new Vue({
  el: '#app',
  router,
  store,   // 将引用的文件添加到Vue项目中
  components: { App },
  template: '<App/>'
});


在store.js文件中添加

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 定义各种全局变量
  },
  mutations: {
    //定义各种方法，一般用于axios
  }
})

引用变量

比如store.js文件中定义：
state: {
    username:  Cookie.get("username"),
    token:  Cookie.get("token"),
  },

那么在其他vue文件中引用如下：
this.$store.state.token
this.$store.state.username

转载于:https://www.cnblogs.com/ttyypjt/p/11012876.html