首页 > 其他分享 >store文件夹 vue_vue-cli2使用store存储全局变量

store文件夹 vue_vue-cli2使用store存储全局变量

时间:2023-05-30 14:47:41浏览次数:44  
标签:vue cli2 token state Vue Vuex store

1.引入store

安装引入vuex,在main.js里面:

import store from './store' //store引入

new Vue({
el: '#app',
router,
store,//store引入
components: { App },
template: ''
})

在store文件夹下创建index.js入口文件,添加下面内容:

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

Vue.use(Vuex);

//要设置的全局访问的state对象
const state = {
    token: "",
    user:null    
};

const store = new Vuex.Store({
    state
});

export default store;

全局变量写在state里。

2.修改变量

在需要修改的地方使用this.$store.state.token=XXX进行修改:

watch: {
    dbData: function() {
        this.$store.state.token= this.dbData;
    }
}

3.获取变量

在需要获取的地方使用 XXX=this.$store.state.token进行获取:

data() {
    return {
        title: "11",
        textData: ""
    };
},

computed: {
    text() {
        return this.$store.state.textData; //需要监听的数据
    }
},

watch: {
    text(newVal, oldVal) {
        let that = this;
        //do something
        this.textData = newVal;
    },

},                       

  

 

标签:vue,cli2,token,state,Vue,Vuex,store
From: https://www.cnblogs.com/beyondzw/p/17443167.html

相关文章

  • vue事件修饰符
    @click@click直接点击,会触发父元素事件例如:<template><div@click="parentClick"><div@click="childClick">子界面</div></div></template><script>exportdefault{ ......
  • Vue05-Vuex
    01.什么是状态管理在开发中,我们的应用程序需要处理各种各样的数据,这些数据需要保存在我们应用程序的某一个位置,对于这些数据的管理我们就称之为状态管理。在Vue开发中,我们使用组件化的开发方式:在组件中我们定义data或者在setup中返回使用的数据,这些数据我们称之为state(状......
  • 黑马Vue3 + ElementPlus + Pinia 小兔鲜电商项目2023版
    黑马Vue3+ElementPlus+Pinia小兔鲜电商项目2023版download:3w51xuebccomElementPlus:优雅高效的Vue组件库随着Vue.js在前端开发中的广泛应用,越来越多的UI组件库涌现出来。而其中一款备受瞩目的组件库就是ElementPlus。作为一款基于Vue3.0的组件库,ElementPlus不仅完美地继承了......
  • VUE+FastAPI结合高德地图API做一个旅游推荐系统
    最近一个月没有更新博客,去写了一个系统,包含前台和后台,还有后端的API。前后台使用VUE+高德地图API,后台使用FastAPI,实现了一些基本的功能。前台部分因为我也是前端初学者,写的比较乱基础功能用户登陆注册功能搜索功能主页照片墙跳转对应详情页打卡功能评论功能(没接......
  • vue3.0路由的两种方式
    import{createRouter,createWebHashHistory}from'vue-router'constroutes=[{path:'/',name:'index',component:()=>import('./pages/index.vue')//异步加载}]constrouter=createRouter(......
  • vue模拟el-table演示插槽用法
    vue模拟el-table演示插槽用法很多人知道插槽分为三种,但是实际到elementui当中为什么这么用,就一脸懵逼,接下来就跟大家聊一聊插槽在elementui中的应用,并且自己写一个类似el-table的组件vue的slot分为三种::匿名插槽,具名插槽,作用域插槽,主要作用:让父组件可以向子组件指定位置插入......
  • vue前端的avue-crud操作
     1、在js中获取某个字段的属性,或设置字段的值:constcolumn=this.findObject(this.option.column,"parentId");column.disabled=true;//设置为禁用此字段column.value='1';//设置parentId字段的value值console.log("column属性:",co......
  • Vue基本知识1,安装创建以及常用指令
    Vue基本知识1,安装创建以及常用指令1.Vue的概念概念vue是一个渐进式的JavaScript开发框架;基于MVVM实现数据驱动的框架官网还可以用来做SPA(singlepagewebapplication):一个网页就是一个应用;例如网易云特点体积小速廈快数据双向绑定生态丰富学习成本低2.安......
  • pstore
    简介pstore文件系统(是的,这是个文件系统)是PersistentStorage的缩写,最早在2010年由TonyLuck设计并合入Linux主分支,设计的初衷是在内核Panic/Oops时能自动转存内核日志(log_buf),在Panic重启后,把转存的日志以文件形式呈现到用户空间以分析内核崩溃问题。这对分析那种小概率且没办......
  • 基于JAVA的springboot+vue医院信息管理系统、医院挂号管理系统,附源码+数据库+论文+PPT
    1、项目介绍任何系统都要遵循系统设计的基本流程,本系统也不例外,同样需要经过市场调研,需求分析,概要设计,详细设计,编码,测试这些步骤,基于java语言设计并实现了医院信管系统。该系统基于B/S即所谓浏览器/服务器模式,应用java技术,选择MySQL作为后台数据库。系统主要包括首页,个人中心,用户......