精华内容
下载资源
问答
  • //提交保存数据 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.store.dispatch(‘delView’, this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.ro...

    vue-element-admin项目里自带的tagsviews.vue里有相关所有关闭刷新等操作标签的方法。

    vue-element-admin项目地址:https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/TagsView/index.vue
    

    在这里插入图片描述

    //提交保存的数据
    this.$store.dispatch('save', this.postForm).then(result => {
               //保存后关闭页面
                this.$store.dispatch('delView', this.$route).then(({ visitedViews }) => {
                  //关闭页面后跳转别的页面
                  this.$router.push({path: '/list'})
                })
              })
    
    展开全文
  • 今天小编就为大家分享一篇Vue保存数据到磁盘文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 保存页面的数据,页面显示就执行某个函数,页面隐藏就执行某个函数实现方式: 1.在路由内设置页面是否需要缓存; 示例代码:(在需要的组件里面添加meta 对象,keepAlive属性,keepAlive的值为是否需要缓存组件) ...

    用 VUE 默认的 keep-alive 组件实现

    保存页面的数据,页面显示就执行某个函数,页面隐藏就执行某个函数实现方式:

    1.在路由内设置页面是否需要缓存;

    示例代码:(在需要的组件里面添加meta 对象,keepAlive属性,keepAlive 的值为是否需要缓存组件)

        {
          path:'/UpInfo',
          name:'UpInfo',
          component:UpInfo,
          meta:{
            keepAlive:true
          }


    2.在 app.vue 里面使用 router-view 组件;

    在 APP.vue 里面 使用 keep-alive 把 router-view 包裹起来,并且判断是否在路由里面设置的是否需要缓存。

    <template>
      <div id="app">
        <keep-alive>
          <router-view v-if='$route.meta.keepAlive'/>
        </keep-alive>
          <router-view v-if='!$route.meta.keepAlive'/>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
          }
        },
        methods: {},
        mounted() {
        }
      }
    </script>
    <style scoped />

    3.页面显示就执行某个函数,页面隐藏就执行某个函数    ------ 前提是在app.vue里面用 keep-alive 组件并且路由l里面的keepAlive 为true(如上一段代码)。

    //info.vue
    <template>
      <div id="info">
        我的info页面
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
          }
        },
        methods: {},
        activated() {
          console.log('我这个页面显示就会执行');
        },
        deactivated: function () {
          console.log('我这个页面退出的会执行');
        },
        mounted() {
        }
      }
    </script>
    <style scoped />

     

     

    展开全文
  • vue数据保存到vuex中

    万次阅读 2017-11-26 17:08:30
    在项目中遇到这样一个问题,就是在登入的时候同时需要从后台获取到左边的导航,但是如果使用h5的localStorage来保存导航信息,会出现app加载进去之后...于是把数据保存到vuex中管理,以下是把数据保存到vuex中

    在项目中遇到这样一个问题,就是在登入的时候同时需要从后台获取到左边的导航,但是如果使用h5的localStorage来保存导航信息,会出现app加载进去之后localStorage才保存进浏览器,在mounted方法中,console.log(window.localStorage.getItem('xx')打印出来是undefined,于是把数据保存到vuex中管理,以下是把数据保存到vuex中的例子(转载,来源参考https://www.cnblogs.com/jasonwang2y60/p/6606822.html)


    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅。

    整个的流程是在组件的created中提交dispatch然后通过action调用一个封装好的axios然后再触发nutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上

    首先新需要在项目中安装vuex:

    运行命令 npm install vuex --save-dev

    在项目的入口js文件main.js中

    import store from './store/index'

    并将store挂载到vue上

    复制代码
    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      render: (createElement) => createElement(App)
    })
    复制代码

     

    然后看下整个store的目录结构,modules文件夹用来将不同功能也面的状态分成模块,index.js文件夹是store的入口文件,types文件夹是定义常量mutation的文件夹

    整个vuex的目录结构如下:

    这里我新建了文件夹fetch用来编写所有的axios处理和axios封装

    在fetch文件夹下新建api.js文件:

    复制代码
    import axios from 'axios'
    
    export function fetch(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, params)
                .then(response => {
                     alert('Api--ok');
                    resolve(response.data);
                })
                .catch((error) => {
                  console.log(error)
                   reject(error)
                })
        })
    }
    
    export default {
      // 获取我的页面的后台数据
      mineBaseMsgApi() {
         alert('进入api.js')
        return fetch('/api/getBoardList');
      }
    }
    复制代码

    在store的入口文件index.js中:

    复制代码
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import mine from './modules/mine';
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      modules: {
        mine
      }
    });
    复制代码

    在你需要请求后台数据并想使用vuex的组件中的created分发第一个dispatch:

    created() {
        this.$store.dispatch('getMineBaseApi');
      }

    然后在store/modules下的对应模块js文件中,这里我使用的mine.js文件中编写state、action和mutation

    复制代码
    import api from './../../fetch/api';
    import * as types from './../types.js';
    
    const state = {
      getMineBaseMsg: {
        errno: 1,
        msg: {}
      }
    }
    
    const actions = {
      getMineBaseApi({commit}) {
        alert('进入action');
        api.mineBaseMsgApi()
        .then(res => {
            alert('action中调用封装后的axios成功');
            console.log('action中调用封装后的axios成功')
            commit(types.GET_BASE_API, res)
        })
      }
    }
    
    const getters = {
      getMineBaseMsg: state => state.getMineBaseMsg
    }
    
    const mutations = {
      [types.GET_BASE_API](state, res) {
        alert('进入mutation');
        state.getMineBaseMsg = { ...state.getMineBaseMsg, msg: res.data.msg }
        alert('进入mutations修改state成功');
      }
    }
    
    export default {
      state,
      actions,
      getters,
      mutations
    }
    复制代码

    然后在想取回state的组件中使用mapGetters获取state:

    复制代码
    import { mapGetters } from 'vuex';
    
    export default {
      ...
      computed: {
        ...mapGetters([
          'getMineBaseMsg'
        ])
      },
      ...      
    }
    复制代码

    然后在控制台查看把:

    getters和mutation都已经成功了,同时我在提交state的整个过程都添加了alert,大家可以看看整个流程是如何走的;

     

    展开全文
  • Vue保存数据到磁盘文件

    千次阅读 2017-09-18 20:33:46
    网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定。 以app.vue为例导出下面在方法中定义函数methods:{ ExportData(){ //定义文件内容,类型必须为Blob 否则...

    网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定。

    以app.vue为例

    <mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">导出</mt-button>
    下面在方法中定义函数
    methods:{
      		ExportData(){
    	  	//定义文件内容,类型必须为Blob 否则createObjectURL会报错
    	  	let content = new Blob([JSON.stringify(this.todos)])
    
    	  	//生成url对象
    	  	let  urlObject = window.URL || window.webkitURL || window	
    	  	let url = urlObject.createObjectURL(content)	
    	  	//生成<a></a>DOM元素
    	  	let el = document.createElement('a')
    	  	//链接赋值
    	  	el.href = url
    	  	el.download ="todo文件导出.txt"
    	  	//必须点击否则不会下载
    	  	el.click()		
    	  	//移除链接释放资源		
    	    urlObject.revokeObjectURL(url)
    	  }
    }

    需要注意的几点
    
    
    1、在chrome下是不能使用new activexobject进行下载,这种方式只适用于ie
    2、createObjectURL的参数必须是blob类型,不然会提示url.createObjectURL出错
    
    
    搞定了导出,还需要可以导入数据才行,下次在弄
    
    

    展开全文
  • Vue 之 Vux数据保存

    千次阅读 2019-01-04 11:58:41
    在日常Vuex项目开发中,我们经常需要这样一个需求:页面是不关闭,那么数据永久存在,但是Vue的插件Vux的特性决定了,一旦页面刷新,即使不关闭,Vux内的状态,依然会丢失,除非重新赋值 解决 在和朋友交流的时候,...
  • 想要点击不同的tab切换提交信息,然后点击回到对应的tab是保存记录 <div class="btn_list"> //这个是循环上边的tab切换 <span :class="['genre',now == item.id ? 'cur' : '']" v-for="(item,index) in ...
  • vue里面的数据保存

    万次阅读 2017-12-23 16:01:14
    以前对于一些小的数据 我一般都是用  //sessionStorage.setItem("pushlist", this.$Qs.stringify(pushlist)); 这个保存,然后用下面的获取  var add = this.$Qs.parse(sessionStorage.getItem(...
  • ** // 定义一个点击下载事件 ** 完成后就可以吧列表导入的base64位数据流转化位表格的形式,并且下载导出。
  • 文章目录#1.vue+axios保存后端发来的token#1.1根据接口文档来保存#1.2使用localstroage或者cookie或者sessionStroage保存token#2.vue+axios取出保存的token,向后端发送请求#2.1使用cookie携带token(获取到之后,再...
  • created () { this.$store.replaceState(Object.assign(this.$store.state,JSON.parse...在created 生命周期中 保存数据 和同步数据 转载于:https://www.cnblogs.com/buxiugangzi/p/11379178.html
  • Vue中使用sessionStorage保存用户数据

    千次阅读 2020-04-28 10:05:42
    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、...
  • Vue数据传递

    2020-11-17 15:43:04
    M:Model数据模型(保存数据,处理数据业务逻辑) V:View视图(展示数据,与用户交互) VM:ViewModel数据模型和视图的桥梁(M是中国人,V是美国人,VM就是翻译) MVVM设计模式最大的特点就是支持数据的双向传递 数据可以从M...
  • (options.trailing === false)) { fn.apply(that, args) } leadingExc = false }, delay) } } const on = Vue.prototype.$on Vue.prototype.$on = function(event, fn) { if (event === 'click') { const wrapFn = ...
  • 很多时候需要保存数据然后复用该数据,因vue的双向绑定总是不能保存原始数据 随笔记录解决方式 1. 不要把变量放置在data中 2. 保存至新的变量 object : let obj= Object.assign({}, oldObj) => 保存一个...
  • elment ui 的 table 表格本身带了一个跨页保存数据的属性 也就是说 row-key 配合 reserve-selection 是可以进行数据的保存的,我们可以通过请求到的数据和存储的跨页数据进行匹配做到回显不成问题,但是在我个
  • P13-Vue-supermall项目-首页分类商品数据请求保存封装 1.概述 在上篇文章P12-Vue-supermall项目-首页TabContro封装中对首页商品分类做了封装,下面就是请求商品分类的数据,这里对商品分类数据请求和保存也需要做一...
  • @vue/cli 4.4.1 “vue”: “^2.6.11”, “vue-router”: “^3.2.0”, <keep-alive> <router-view v-if="$route.meta.alive"></router-view> </keep-alive> 版本2 @vue/cli 4.2.0 “vue”...
  • 参考了辣子鸡大神利用 Github Gist 进行远程数据的存储,自己也尝试用 vue 框架写了一个移动端个人博客,参考地址:https://blog.csdn.net/Dogfights/article/details/80117569?utm_source=blogxgwz5 地址 Demo...
  • a页面跳转到b页面,b页面点击浏览器回退,回退到a页面,a页面的数据都是跳转前的数据数据没有发生变化
  • 保存数据 this.$options = option this.$data = option.data this.$el = option.el // 2. 将 data 中数据保存到响应式系统中 new Observer(this.$data) // 3. 代理 this.$data 的数据 Object.keys(this.$...
  • From----Work:在vue中使用sesstionStorage保存页面数据 1、先说下sessionStorage、localStorage、cookie的区别 1)localStorage:永久保存到本地,除非用户手动删除,也可以通过代码自定义的方法来删除。 优缺点:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,869
精华内容 747
关键字:

vue保存数据

vue 订阅