博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
新版的vue cli默认没有自动创建router.js 和 store.js
阅读量:4112 次
发布时间:2019-05-25

本文共 2721 字,大约阅读时间需要 9 分钟。

router.js

import Vue from 'vue'import Router from 'vue-router'import Index from './views/Index.vue'Vue.use(Router)export default new Router({    routes: [        {            path: '/',            name: 'index',            component: Index        },        {            path: '/about',            name: 'about',            // route level code-splitting            // this generates a separate chunk (about.[hash].js) for this route            // which is lazy-loaded when the route is visited.            component: () => import(/* webpackChunkName: "about" */ './views/About.vue')        },        {            path: '/info/:id',            name: 'info',            component: () => import('./views/ShopInfo.vue')        }        ,        {            path: '/guid',            name: 'guid',            component: () => import('./views/Guid.vue')        }    ]})

store.js

import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({    state: {        user: {}, shops: [], baseUrl: 'http://plateform.com:81', shopInfo: {}    },    getters: {        user(state) {            return state.user;        },        shops(state) {            return state.shops;        },        baseUrl(state) {            return state.baseUrl;        },        shopInfo(state) {            return state.shopInfo;        }    },    mutations: {        setUser(state, user) {            state.user = user        },        setShops(state, shops) {            shops.forEach((v) => {                state.shops.push(v)            })        },        setShopInfo(state, shopInfo) {            state.shopInfo = shopInfo;        }    },    actions: {        //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。        getShopInfo({state, commit}, param) {            return new Promise((resolve,reject)=>{                console.log('getShopInfo')                axios.get(state.baseUrl + '/api/shop/' + param.id)                    .then((data) => {                        console.log(data)                        commit('setShopInfo', data.data)                        resolve();                    })                    .catch((err) => {                        console.log(err)                        reject();                    })            })        }    }})

main.js

import Vue from 'vue'import App from './App.vue'import store from './store'//引入sotreimport router from './router'//引入routerimport axios from 'axios'Vue.config.productionTip = falserouter.beforeEach((to, from, next) => {    console.log('进入守卫')    console.log(to)})new Vue({    store,    router,    render: h => h(App)}).$mount('#app')

转载地址:http://hmrsi.baihongyu.com/

你可能感兴趣的文章
Golang面试考题记录 ━━ 删除链表的倒数第N个节点, 学习闭包递归、双指针、哨兵节点
查看>>
服务器配置篇 ━━ iis7配置php出现fastcgi的500错误,LocalSystem/LocalService/NetworkService/ApplicationPoolIdentity
查看>>
Golang学习日志 ━━ VSCode安装Go插件(代理的使用)及初用mod
查看>>
windows使用小技巧 ━━ Windows 10 HEVC扩展要收费怎么办?教你怎么免费下载HEVC扩展
查看>>
Golang学习日志 ━━ 使用bufio方法拷贝文件将导致mov视频文件出错
查看>>
Golang学习日志 ━━ Mysql相关
查看>>
Golang学习日志 ━━ goQuery 的使用
查看>>
Golang学习日志 ━━ Go 常用包整理及介绍
查看>>
Golang学习日志 ━━ 借百度AI实现语音合成实例
查看>>
安全篇 ━━ 整改mysql数据库及windows服务器(根据安全等级保护评估、渗透测试报告)
查看>>
PHP开发日志 ━━ PHP验证码程序:session生成图片
查看>>
安全篇 ━━ ITlearner ASP探针 V1.2
查看>>
uni-app开发日志[2020122501]:uni-app 和 Vue 的区别
查看>>
uni-app开发日志[2020122502]:uniapp将图片绝对路径转化为BASE64格式
查看>>
PHP开发日志 ━━ MYSQL数据库使用UTF-8中文编码乱码的解决办法
查看>>
PHP开发日志 ━━ IIS7安装PHP8.0及多个版本如何同时存在一台服务器
查看>>
安全篇 ━━ windows2008自建证书、IIS配置https服务器及浏览器报错处理
查看>>
PHP开发日志 ━━ jsrsasign、jsencrypt、php实现前后端数据的RSA加密和解密
查看>>
机械键盘各种设定(品牌:黑爵等)
查看>>
Golang学习日志 ━━ log用法及注意使用条件,否则可能导致关闭程序
查看>>