资讯专栏INFORMATION COLUMN

关于vue开发的常见问题

陆斌 / 1397人阅读

摘要:看看这里说的顺便你可以加深对和的理解计算属性默认只有,不过在需要时你也可以提供一个然后,解决完毕嘻嘻嘻二打包工程上线后,你发现开发者工具的看到了源码对,上线配置错了。

一、vue单页面回退丢失参数的问题
可能有些跟我一样的新手同学会遇到一个问题,就是比如我从商品详情跳转到购物车,没问题,但是,购物车页面中点击浏览器的回退按钮,返回到detail页面时,你的动态数据(图片啊,名称啊,价格啊什么的)不见了,只剩下一堆css样式架子在那里,很难受。
这就是单页面回退参数丢失的问题,话不多说,直接说解决方法。
1、首先,我们需要了解一下Vuex。(状态管理)具体大家百度vuex

在vue-cli工程中
npm安装:npm i vuex --save

引入到项目mian.js中:
import Vuex from "vuex"
Vue.use(Vuex);

定义一个常量
const store = new Vuex.Store({
    state: {
      songInfo:""
    },
    mutations: {
       //定义函数,比如我要获取songInfo
      getSongInfo(state, songInfo) {
          state.songInfo = songInfo;
      }
    }
});
然后全局的vue中加上去store
/* eslint-disable no-new */
    new Vue({
      el: "#app",
      router,
      store,
      components: { App },
      template: ""
   })
  这样,我们main.js的部分就做好了,那么页面部分怎么做呢
  我们既然要获取,就要先存
  在你存数据的vue页面中,id是参数,可以是数组,变量什么的,要不要看你自己需求
    save(id){
           //console.log(id);
           this.$store.commit("getSongInfo", id);
       }
  然后接下来就是在你想要获取数据的页面获取储存的东东了
  computed:{
    hereIsYourData(){
        return this.$store.state.songInfo;
    }
  }

为什么加了个computed计算属性呢?我觉得挺方便的。看看这里说的
https://cn.vuejs.org/v2/guide...
顺便你可以加深对watch和conputed的理解
计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter
然后,解决完毕!嘻嘻嘻

二、webpack打包工程上线后,你发现开发者工具的source看到了源码
对,webpack上线配置错了。去到config文件夹下的index.js,里面有个build的内容,把其中的productionSourceMap改成false

三、凡是修改了项目的配置,都要重新npm run dev 哟,因为热重载一般是自动更新修改的页面

四、vue的Post请求到后台语言(php,java,asp啥的),发现post不出去,不报错又没效果
解决方案:加上{emulateJSON: true}。例如:

    this.$http.post("url", {
        //参数
    },{emulateJSON: true}).then(function(res) {
        //suc
    });
    

五、发现webpack打包后,页面是空的
可能你的路由mode是history,要改成hash,一般默认是hash。

。。。就大概说这些吧,想不起来了。。。我只是个初学者。。。

最后link一下算是带我入门的导师,慕课网的河畔一角,看了他的视频,讲的很棒
https://coding.imooc.com/clas...

还有我的项目,大家喜欢的话,可以找我要源码,同时跪求!跪求!有大神可以指点我一下子!
http://111.230.91.125:3000/#/
http://111.230.91.125:8080/Vshop/view/index.html

如果你觉得文章不错的话,点个小赞呗,谢谢谢谢,嘻嘻嘻!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95711.html

相关文章

  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • 关于个人开源项目(vue app)一些总结

    摘要:关于个人开源项目的一些总结项目地址项目简介此项目名叫。网站目前实现了登录注册日历导入文件考勤导出缺勤名单等核心功能。这对于小型项目来说并没有什么问题。编译后的大小关于文件上传与导出功能文件上传导出可以说是此项目最关键的点了。 关于个人开源项目(vue app)的一些总结 项目地址 https://github.com/BYChoo/record 项目简介 此项目名叫:Record。是以...

    since1986 评论0 收藏0
  • 关于个人开源项目(vue app)一些总结

    摘要:关于个人开源项目的一些总结项目地址项目简介此项目名叫。网站目前实现了登录注册日历导入文件考勤导出缺勤名单等核心功能。这对于小型项目来说并没有什么问题。编译后的大小关于文件上传与导出功能文件上传导出可以说是此项目最关键的点了。 关于个人开源项目(vue app)的一些总结 项目地址 https://github.com/BYChoo/record 项目简介 此项目名叫:Record。是以...

    高胜山 评论0 收藏0

发表评论

0条评论

陆斌

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<