vuex准备

最新推荐文章于 2025-02-12 09:25:57 发布

ZXY_lucky

最新推荐文章于 2025-02-12 09:25:57 发布

阅读量136

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/ZXY_lucky/article/details/125424467

版权

1.vuex创建

因为 Element-ui 基于Vue 2.0，所以版本选择2.0版本

1.1创建vuex命令

在小黑框中输入：vue create 项目名

1.2 版本选择

在这里插入图片描述

2.vuex使用前配置

2.1 查看运行方式

在这里插入图片描述

是serve就是 npm run serve
是dev就是 npm run dev

2.2 安装配件

安装router

npm install -s vue-router@3

安装请求、element组件

npm install -s axios vuex@3 element-ui

安装拦截器所依赖的文件

npm install -s core-js

2.3 配置文件

2.3.1 配置 main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

import ElementUI from 'element-ui'
Vue.use(ElementUI)
import 'element-ui/lib/theme-chalk/index.css'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

2.3.2 配置api.js文件

在src问价夹下创一个common文件夹，创建api.js文件

import axios from "axios";

//基础配置
axios.defaults.baseURL = "http://127.0.0.1:8000/"
axios.defaults.withCredentials = true  //请求携带cookie
axios.defaults.headers['X-Requested-With'] = "XMLHttpRequest"  //构造异步请求
axios.defaults.headers.post["Content-Type"] = "application/json"

// //全局请求拦截器
axios.interceptors.request.use(
    (config)=>{
        console.log("请求的配置:",config)
        //配置请求头配置到django
        config.headers.Authorization = localStorage.token
        config.headers.author = "laufing"
        return config
    }, 
    (error)=>{
        console.log("请求错误:",error)
        return Promise.reject()
    }
    
)


//全局相应拦截器
axios.interceptors.response.use(
    (response)=>{
        console.log("拦截响应:",response)

        return response
    }, 
    (error)=>{
        console.log("响应错误:",error)
        return Promise.reject()
    }
    
)

export default axios

2.3.3 配置App.vue文件

在这里插入图片描述

2.3.4配置路由

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

import HomeView from '../components/HomeView.vue'
import IndexView from '../components/IndexView.vue'
import StaffView from '../components/StaffView.vue'
import RegView from '../components/RegView.vue'
import LoginView from '../components/LoginView.vue'

//const 定义常量
const routes = [
    {
        path:'/',
        component:HomeView
    },
    {
        path:'/index',
        component:IndexView,
        children: [
            {
                path: '/index/staff',
                component:StaffView
            }
        ]
    },
    {
        path:'/reg',
        component:RegView
    },
    {
        path:'/login',
        component:LoginView
    }

]

//把路由暴露出去，以便其他访问
const router = new VueRouter({
    routes,
})

export default router