开发者社区> 技能实验室> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

vue项目添加状态管理Vuex,路由router,axios

简介: Vue开发实战02-vue项目添加状态管理Vuex,路由router,以及http请求axios
+关注继续查看

1、添加vuex:

安装依赖,打开终端,执行命令:

yarn add vuex

不能使用install
在这里插入图片描述

编码新建utils目录下store.js文件

/**存储*/
import { createStore } from "vuex"
const state = {
    user: {
        userName: "",
        avtived: false,
        online: false
    }
}

const mutations = {
    setUser(state, data) {
        state.user.userName = data.userName;
        state.user.avtived = data.avtived;
    }
}
const actions = {
    setUser({ commit }, data) {
        // 模拟异步处理
        setTimeout(() => {
            commit("setUser", data);
        }, 3000);
    }
}

const getters = {
    getUser(state) {
        return state.user;
    }
}

export default createStore({
    state,
    mutations,
    actions,
    getters
})

修改main.js,测试store

import { createApp } from 'vue'
import App from './App.vue'
import store from './utils/store'
createApp(App).use(store).mount('#app')

//测试store
store.commit("setUser",{userName:'xiao wang'})
console.log(store.getters.getUser)

2、添加router

打开终端 执行命令,添加router依赖

yarn add vue-router

在这里插入图片描述

在utils目录下新建router.js文件

import {createRouter,createWebHistory} from "vue-router"
import home from '../components/HelloWorld.vue'

const routes = [{
    path: '/',
    component: home
},{
    path:'/other',
    component: home
}]

export default createRouter({
    history:createWebHistory(),
    routes:routes
})

修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './utils/store'
import router from './utils/router'
//Vue.config.productionTip = false

//createApp(App).use(store).use(router).mount('#app')

const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

3、添加axios:

打开终端添加依赖:axios和vue-axios

yarn add axios vue-axios

在这里插入图片描述
修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './utils/store'
import router from './utils/router'
import axios from 'axios'
import VueAxios from 'vue-axios'
//Vue.config.productionTip = false

//createApp(App).use(store).use(router).mount('#app')

const app = createApp(App)
app.use(store)
app.use(router)
app.use(VueAxios,axios)
app.mount('#app')


//测试store
store.commit("setUser",{userName:'xiao wang'})
console.log(store.getters.getUser)
//测试axios
axios.get('http://192.168.1.15:8080/api/upload/file?id=806a89ac32f346378dc228206872ef3f').then((response) => {
    console.log(response)
})

关键语句: app.use(VueAxios,axios)

4、添加代理配置:

在根目录下新建vue.config.js文件


module.exports = {
    devServer: {
        proxy: {
          '/api': {
            target: 'http://192.168.1.15:8080/api',
            ws: true,
            changeOrigin: true
          },
        }
      }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Nginx+SpringCloud Gateway搭建项目访问环境
Nginx+SpringCloud Gateway搭建项目访问环境
168 0
Vue入门项目:学生管理系统之班级管理 【含源码】(二)
Vue入门项目:学生管理系统之班级管理 【含源码】(二)
83 0
Vue入门项目:学生管理系统之班级管理 【含源码】(一)
Vue入门项目:学生管理系统之班级管理 【含源码】(一)
79 0
Vue Router 手把手教你搭 Vue3 路由 - 卡拉云
Vue 的单页面应用是基于路由+组件的形式,路由用于设定访问路径,并将路径与组件映射起来。这种形式相对于 a标签超链来说不会重新加载页面,而是在同一个页面中进行路由跳转。 本教程在 Vue3 中手把手教你搭建 Router ,并详细讲解其中的路由原理以及当用户输入错误时,如何路由到 404 页面等方法。请打开你的 Terminal 跟随本教程一起学习。 如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。
70 0
Nuxt.js项目中js文件单独使用Vuex的store
Nuxt.js项目中js文件单独使用Vuex的store
186 0
Vue.js路由router
一、Vue.js简介 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
1105 0
Vue-router(二) 子路由(嵌套路由)
实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件。借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。
9982 0
vue使用vue-router beforEach实现判断用户登录跳转路由筛选
在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求。
2355 0
+关注
技能实验室
python java vue css typescript
84
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载