Vue2从入门到精通：全面掌握前端开发利器Vue.js！（第十三部分Vuex.js部分）

于 2024-07-01 11:32:38 发布
阅读量821 收藏 17
点赞数 18
分类专栏： 开发资料 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64192735/article/details/140096112
版权

目录

十三.Vuex的安装及使用

1. 安装 Vuex

2. 创建 Vuex Store

3. 在 Vue 应用中使用 Vuex

4. 在组件中使用 Vuex

十四.数据交互axios

1. 安装 Axios

2. 在 Vue 项目中使用 Axios

3. 处理跨域请求

3.1 后端配置 CORS

3.2 使用代理解决跨域问题

总结

十五.拦截器

1. 请求拦截器

1.1. 添加请求拦截器

1.2. 请求拦截器错误处理

2. 响应拦截器

2.1. 添加响应拦截器

2.2. 响应拦截器错误处理

总结

十六.辅助拦截器

十三.Vuex的安装及使用

Vuex 是 Vue.js 应用程序开发中用于集中管理应用状态的库。下面是如何安装和创建 Vuex 的基本步骤：

1. 安装 Vuex

首先，确保你的项目中已经安装了 Vue.js。然后可以通过 npm 或 yarn 安装 Vuex。

使用 npm：npm install vuex --save

使用 yarn：yarn add vuex

2. 创建 Vuex Store

创建一个 Vuex 的实例，用于管理应用的状态。通常在一个单独的文件中创建和导出。

在项目中创建一个新文件，如 store/index.js，并编写以下内容：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 创建一个 Vuex store 实例
const store = new Vuex.Store({
  state: {
    // 在这里定义你的应用状态
    count: 0
  },
  mutations: {
    // 定义同步修改状态的方法
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    // 定义异步操作或者包含多个 mutation 的操作
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义派生状态，类似于组件中的计算属性
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

3. 在 Vue 应用中使用 Vuex

将创建好的 Vuex 实例引入到你的 Vue 应用中，一般是在入口文件（如 main.js）中：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,  // 注入 Vuex store 到所有的子组件
  render: h => h(App)
}).$mount('#app');

4. 在组件中使用 Vuex

现在，你可以在任何组件中使用 Vuex 状态管理。

例如，在一个组件中显示和操作 Vuex 中的状态：

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <p>Double Count: {{ $store.getters.doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

这就是使用 Vuex 的基本流程。通过 mutations 定义同步修改状态的方法，通过 actions 定义异步操作或多个 mutations 的操作，通过 getters 定义派生状态。在组件中通过 $store.state 访问状态，通过 $store.commit 提交 mutations，通过 $store.dispatch 分发 actions。

十四.数据交互axios

安装和使用 Axios 是在 Vue.js 项目中进行 HTTP 请求的常用方法。同时，处理跨域请求也是开发中常见的需求。下面我来详细说明如何安装、使用 Axios，并解决跨域请求的问题。

1. 安装 Axios

首先，在你的 Vue.js 项目中安装 Axios。确保已经安装了 Vue CLI 或者在现有项目中已经配置好了 Vue.js。

使用 npm 安装：

npm install axios --save

使用 yarn 安装：

yarn add axios

2. 在 Vue 项目中使用 Axios

一般来说，你可以在 Vue 组件中或者 Vuex 的 action 中使用 Axios 来发起 HTTP 请求。以下是一个基本的示例：

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">
      <h2>Data fetched:</h2>
      <p>{{ data }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>

3. 处理跨域请求

3.1 后端配置 CORS

跨域请求通常需要在后端进行配置，允许来自不同域名的请求。如果你有权限控制后端服务，可以在后端服务器上配置 CORS。

例如，在 Express 框架中配置 CORS：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有来源的跨域请求
app.use(cors());

// 或者指定允许的域名和方法
app.use(cors({
  origin: 'http://localhost:8080',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type'],
}));
3.2 使用代理解决跨域问题

在开发环境中，可以使用 Vue CLI 提供的代理功能来解决跨域问题。

在 vue.config.js 中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

这样，所有以 /api 开头的请求都会被代理到 https://api.example.com，并且会处理跨域问题。

总结

安装和使用 Axios 并不复杂，它是一个强大且简单的 HTTP 请求库，适用于 Vue.js 项目的前后端交互。解决跨域问题通常需要后端配合或者使用开发环境的代理。以上步骤应该能帮助你成功集成 Axios 并处理跨域请求。

十五.拦截器

当使用 Axios 进行 HTTP 请求时，可以通过请求拦截器和响应拦截器来全局地处理请求和响应。这些拦截器允许你在请求发送前和响应返回前对请求和响应进行修改或添加特定的处理逻辑。以下是关于如何配置请求拦截器和响应拦截器的全面说明：

1. 请求拦截器

请求拦截器允许在请求被发送出去之前对其进行修改。

1.1. 添加请求拦截器
import axios from 'axios';

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL，可选
  timeout: 10000, // 设置请求超时时间，单位毫秒，可选
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    // 例如，可以添加自定义的请求头
    config.headers['Authorization'] = 'Bearer your_token';
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 导出配置好的 Axios 实例
export default axiosInstance;

在上面的例子中：

  • 我们创建了一个自定义的 Axios 实例 axiosInstance，可以在整个应用中重复使用。
  • 使用 axiosInstance.interceptors.request.use 方法来添加请求拦截器。
  • 请求拦截器的第一个参数是一个函数，它会接收请求配置 config，你可以在这里修改请求的配置，例如添加请求头。
1.2. 请求拦截器错误处理

如果请求拦截器发生错误，可以通过第二个参数的函数来处理：

axiosInstance.interceptors.request.use(
  function(config) {
    // 请求成功的处理逻辑
    return config;
  },
  function(error) {
    // 请求失败的处理逻辑
    return Promise.reject(error);
  }
);

2. 响应拦截器

响应拦截器允许在响应被 then 或 catch 处理前进行处理。

2.1. 添加响应拦截器
import axios from 'axios';

axios.interceptors.response.use(
  function(response) {
    // 对响应数据做些什么
    return response;
  },
  function(error) {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

在上面的例子中：

  • 使用 axios.interceptors.response.use 方法来添加响应拦截器。
  • 第一个参数是处理成功响应的函数，可以在这里处理返回的数据。
  • 第二个参数是处理响应错误的函数，可以在这里处理请求失败或服务器返回的错误。
2.2. 响应拦截器错误处理

与请求拦截器类似，响应拦截器也可以通过第二个参数来处理错误：

axios.interceptors.response.use(
  function(response) {
    // 响应成功的处理逻辑
    return response;
  },
  function(error) {
    // 响应失败的处理逻辑
    return Promise.reject(error);
  }
);

总结

通过配置请求拦截器和响应拦截器，你可以在 Axios 发送请求和接收响应之前进行全局的处理。这种方式非常有用，可以用来添加认证信息、处理请求或响应的格式、统一处理错误等。记得在使用拦截器时，遵循 Axios 的用法和 Promise 的链式处理，以确保代码的可维护性和可扩展性。

十六.辅助拦截器

辅助函数能够让在组件中使用store中的属性和方法更加方便和快捷

可以通过mapGetters将getters上的数据导入给组件的computed

可以通过mapActions将actions上的方法导入给组件的methods

mapStates 快速获取state中的数据

<template>
    <div>
        <center> <h3>cart页面</h3> </center>
        <!-- 讲解使用辅助函数 -->
        <div>usename:{{ username }}</div>
        <div>age:{{ age }}</div>
        <div>{{ $store.state.username }}</div>

        <div>pjf:{{ pjf }}</div>
        <div>pjf:{{ name }}</div>
        <div>banners:{{ banners }}</div>
        <div>{{ $store.getters.name }}</div>
        <!-- 辅助函数 -->
        <button @click="reqBanners">获取banner数据</button>
        <!-- 原来的写法 -->
        <button @click="$store.dispatch('reqBanners')">获取banner数据</button>
    </div>
</template>
<script>
import { mapState,mapGetters,mapActions}  from "vuex";
export default {
    data() {
        return {
        }
    },
    computed:{
        // ...  拓展运算符
        ...mapState(["username","age"]),
        ...mapGetters(['pjf','name',"banners"])
    },
    methods: {
        ...mapActions(["reqBanners"])
    }
}
</script>

<style  scoped>

</style>

AA-老高
关注
  • 18
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值