Vue-pinia和axios通信

最新推荐文章于 2024-09-05 16:55:11 发布

kyrie0316

最新推荐文章于 2024-09-05 16:55:11 发布

阅读量211

点赞数 9

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/W1060632133/article/details/141502676

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vuex（以后不使用）

store文件夹下index.js中内容的解释

import { createStore } from 'vuex'

export default createStore({
  state: {
    // 要存储全局数据
  },
  getters: {
    // 要存储的只读数据
    // state 上面的state数据			`前两个常用`
    // getters 就是当前getters中的数据
    // rootState 当使用模块时，是根模块的state
    // rootState 当使用模块时，是根模块的getters
    num(state,getters,rootState,rootGetters){
      return 10;
    }
  },
  mutations: {
    // 写方法然后触发后，写入state，只能执行同步的数据
  },
  actions: {
    // 当遇到异步时，执行actions方法，然后再这里异步执行完成后调用mutations中的方法，然后再mutations中修改state
  },
  modules: {
    // 模块，有时候需要将数据进行分类，放在不同的模块中
  }
})


`state的使用`
因为 state中定义的是`全局的数据` 所以`在任何路由中都可以调用到state中的数据`
state: {
    // 要存储全局数据
    list:[1,2,3]
  },
      
// 获取state中的数据
      // 选项式
      export default {
          name: "AView",
          mounted() {
            console.log(`this.$store.state.list`)
          }
        }
	 // 组合式
	  import { useStore } from "vuex"
       const store = useStore();
       console.log(`store.state.list`)


`mutationd的使用`、
// 使用commit 激活mutations
// 因为是全局变量，当再其中一个路由中更改之后，再其他路由中调用是更改后的数据
mutations: {
    // 写方法然后触发后，写入state，只能执行同步的数据
    // state 写入的值     value 给入的值
    setList(state,value){
      state.list=value;
      console.log(value,"获取到传入的数据");
    }
  }
import { reactive} from "vue"
import { useStore } from "vuex"
var arr = reactive([7, 8, 9]);
const store = useStore();

// 第一个参数 mutations中的方法名
// 第二个参数 要传入的参数
`store.commit("setList", arr)`


`getter的使用`
getters: {
    // 存储只读数据
    num(){
      return 10;
    }
  }
import { useStore } from "vuex"
const store = useStore();
console.log(`store.getters.num`);


`actions的使用`
// 使用dispatch 激活actions
actions: {
    // context 上下文环境
    // value 传入的值
    asyncSetList(context,value){
      // 延迟传参
      setTimeout(() => {
        context.commit("setList",value)
      }, 3000);
    }
  }
import { useStore } from "vuex"
var arr = reactive([7, 8, 9]);
const store = useStore();
`store.dispatch("asyncSetList",arr)`

pinia 状态管理

所谓状态管理，简单来说就是`一个存储数据的地方`，存放在pinia(vue3中使用)中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分

`Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。`

`主要优点：`
1.pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。

2.pinia中action支持同步和异步，Vuex不支持

3.良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适了

4.无需再创建各个模块嵌套了，Vuex中如果数据过多，我们通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响。

5.体积非常小，只有1KB左右。

6.pinia支持插件来扩展自身功能。

7.支持服务端渲染。

pinia中store的写法

在其中定义的属性和方法都是全局的，任何路由中都可以调用到其中的属性和方法

`写法1`
// 这种写法无法使用getters
export default defineStore("main", () => {
  // 在这个回调函数里面 定义变量和方法
  const count: Ref<number> = ref(0);

  // 使用computed 代替getters的作用
  const sum: ComputedRef<number> = computed(() => {
    return count.value * 10
  })

  function addCount(): void {
    console.log("sss");

  }

  // 返回上面定义的变量
  return {
    count,
    sum,
    addCount
  }
})

`写法2`
// 于vuex中的用法一样
export default defineStore("main", {
  state() {
    return {
      count: 1
    }
  },
  getters: {
    sum: (context) => {
      return context.count * 2;
    }
  },
  actions: {
    addCount() {
      console.log("sss");
    }
  }
})

pinia中store的使用

<!-- pinia中的使用 -->
<script lang="ts" setup>
import useStore from "@/stores/counter";
const store = useStore();
console.log(store.count);

// 调用store中定义的方法
store.addCount()

pinia持久化插件

用于将Pinia状态存储到本地持久化存储中

`下载`
npm install pinia-plugin-persistedstate

`第一种写法`
// 做为函数中的第三个参数 对象 中的一个对象
export default defineStore("main", () => {
const user=reactive({user:"",token:""})
  // 返回上面定义的变量
  return {
    user
  }
},`{
  persist:{
    key: "users",
    storage: localStorage
  }`
})

`第二种写法`
export default defineStore("main", {
  `persist: {
    key: "user",
    storage: localStorage
  }`,
  state() {
    return {
      users:{
        user:"",
        token:""
      }
    }
  },
  getters: {
    
  },
  actions: {
    
  }
})

`使用的方式 对写法1、写法2都满足`
<template>
  <div>
    AView
    <button @click="clickHandler">按钮</button>
  </div>
</template>

// <!-- pinia中的使用 -->
<script lang="ts" setup>
import useStore from "@/stores/counter";
const store = useStore();
// 点击传入数据
function clickHandler(){
  store.users.user="xietian";
  store.users.token="abcdefghjklmnopq"
}
</script>

普通通信(ajax)

// 主文件中
<template>
  <div>
    <form @submit.prevent="submitHandler">
      用户名：<input type="text" v-model="users.user" name="user" :style="{ color: userColor }"><br />
      密码：<input type="password" v-model="users.password" name="password" :style="{ color: passwordColor }"
        autocomplete><br />
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue"
import { useCounterStore } from "@/stores/counter";
const enum INPUT_COLOR { RED = "red", GREEN = "green" };
const users: User.IUser = reactive({
  user: '',
  password: ''
})
const store = useCounterStore();
const userColor: ComputedRef<INPUT_COLOR> = computed(() => {
  return users.user.trim().length === 0 || !/^\w{8,16}$/.test(users.user) ? INPUT_COLOR.RED : INPUT_COLOR.GREEN
})

const passwordColor: ComputedRef<INPUT_COLOR> = computed(() => {
  return users.password.trim().length === 0 || !(/^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])\w{8,16}$/.test(users.password)) ? INPUT_COLOR.RED : INPUT_COLOR.GREEN
})

function submitHandler() {
  if (userColor === INPUT_COLOR.RED || passwordColor === INPUT_COLOR.RED) return;

  var fd: FormData = new FormData();
  Object.keys(users).forEach((key: keyof users) => {
    fd.set(key, users[key]);
  })
  ajax(fd)
}

async function ajax(data) {
  const result = await fetch("http://localhost:5173/a/users/login", {
    method: "POST",
    body: data
  }).catch(e => console.log(e));
  if (result) {
    const res = await result.json();
    console.log(res);
    store.users.user = res.user;
    store.users.token = res.token;
  }
}
</script>

// 路由文件中
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
  ]
})

export default router

// stores文件中
import { ref, computed, reactive } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const users = reactive({
    user: "",
    token: ""
  })

  return {
    users
  }
}, {
  persist: {
    key: "user",
    storage: sessionStorage
  }
})

// 接口文件中
declare namespace User{
  export interface IUser{
    user:string,
    password:string
  }
}

// main.js文件中
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// 引入持久化插件
import Persistedstate from "pinia-plugin-persistedstate"

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

const app = createApp(App)
// 把pinia 单独拿出来
const pinia = createPinia();
// 让pinia 使用Persistedstate
pinia.use(Persistedstate)

// 在让app 使用pinia
app.use(pinia)
app.use(router)
app.mount('#app')

// 在vite.config.ts文件中添加
server: {
    port: 5173,
    proxy: {
      "/a": {
        target: "http://localhost:4000",
        changeOrigin: true,
        rewrite: path => path.replace("/a", "")
      }
    }
  }
// 用来解决跨域问题

axios通信

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，就是对于ajax的封装

特性：
1.从浏览器中创建XMLHttpRequests
2.从node.js创建http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换json数据


`Axios请求方式`
`get：获取数据，请求指定的信息，返回实体对象
post：向指定资源提交数据（例如表单提交或文件上传）`
put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
delete：请求服务器删除指定的数据

`方法1`
axios({url: "http://localhost:5173/a/users/abc?a=1&b=2"}).then(function (res) {
  console.log(res.data);
})


`方法2 get使用`
axios.get("http://localhost:5173/a/users/abc", { params: { a: 1, b: 2 } }).then(function (res) {
  console.log(res.data);
})


`方法3 post使用`
axios.post("http://localhost:5173/a/users/login", { params: { a: 1, b: 2 } }).then(function (res) {
  console.log(res.data);
})


`axios并发请求处理多个`
// 一个先过去进行处理，在处理第二个  但是数据是同时得到的
axios.all([
  axios.get("http://localhost:5173/a/users/abc", { params: { a: 1, b: 2 } }),
  axios.post("http://localhost:5173/a/users/login", { user: "xiaobo", token: "dasdasdasda" })
]).then(axios.spread((res1, res2) => {
  console.log(res1, res2);
}))


`实例`
const instance = axios.create({
  baseURL: "http://localhost:5173/a",
  timeout: 4000
})

拦截器

`请求拦截器`
 // 请求时先执行这里的内容，才会发送个服务端
 // 可以执行一些操作或者携带一些信息
instance.interceptors.request.use(config => {
  // 一般在这里请求时需要带入的部分header中数据，可以在这里请求时写入
  // 如果需要发送数据中有一些共用的数据，也可以在这里放入
  const store = useCounterStore();
  config.headers.token = store.users.token || "";
  config.params.user = store.users.user;
  return config
}, error => {
  // 请求错误的拦截器
  return error
})



`响应拦截器`
// 当服务器手动请求之后，做出响应；接收到数据的时候，进行数据过滤、对状态码判断，进行对应的操作
instance.interceptors.response.use(config => {
  // 有可能服务器发送的部分数据是通过响应头header传过来的，这时候我们可以将这个传送过来的数据统一保存处理
  // 主要用来做所有返回给前端的数据需要统一处理的内容
  console.log(config);
  return config;
}, error => {
  // 响应的结果出错时
  return error
})

get与post的区别

1.GET方法用于`从Web服务器请求数据`，在使用GET方法时，`浏览器向Web服务器发送一个请求`，`Web服务器将响应数据发送回浏览器`,`GET方法是无状态的，也就是说每个请求都是独立的，没有前后关系`。GET方法通常用于请求静态数据，如HTML页面、图片和CSS文件等。

2.POST方法用于`向Web服务器提交数据`。在使用POST方法时，`浏览器将数据打包并发送到Web服务器`。Web服务器收到数据后，可以`根据数据执行相应的操作，并向浏览器发送响应`。`POST方法是有状态的，也就是说请求和响应之间存在关系，请求和响应之间的数据可以互相传递`。POST方法通常用于向Web服务器提交表单数据和上传文件等操作。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

`1.在使用上的差异`
GET一般用于客户端向服务器 `获取 和 检索 数据`
POST 一般用于客户端向服务器 `创建 或 更新 数据`


`2.触发请求的方式`
 // 对于GET来说：
    1、浏览器地址栏输入网址后回车，会触发GET请求
    2、HTML文档中script标签，link标签，img标签引入外部文件时，会触发GET请求
    3、通过点击a标签超链接跳转网页，会触发GET请求
    4、通过form表单发起GET请求
    5、通过ajax发起GET请求
 // 对于POST来说：
	1、通过form表单发起POST请求
	2、通过ajax发起POST请求

    
`3.如何携带请求数据`
 //   对于GET来说：
既可以在URL携带，也可以在请求体中携带。但是，`一般服务器端只会获取从URL中获取GET的请求参数`。
 //	  对于POST来说：
既可以在URL携带，也可以在请求体中携带。但是，`一般服务器端只会获取从请求体中获取POST的请求参数`。


`4.携带的数据大小的限制`
get参数有长度限制(受限于url长度，具体的数值取决于浏览器和服务器的限制，最长2048字节)
post无限制


`5.请求参数是否可以被缓存`
 //	对于GET来说
GET的请求参数一般被加在URL中，作为URL的组成部分，而URL既可以被当作浏览器书签保存，也会被缓存到浏览器历史记录中，所以`GET请求参数可以被缓存`
 //	对于POST来说
POST的请求参数一般放在请求体中，而HTTP请求体一般无法被浏览器缓存，所以`POST请求参数一般来说无法被缓存`。


`6.请求参数的编码方式`
 //	对于GET来说
GET请求参数一般被加在URL中，而URL只支持部分ASCII码字符，所以`GET请求参数中的非ASCII码字符需要经过url encode编码`。常用编码方式有GBK编码，UTF-8编码等，`实际编码方式取决于浏览器`，比如谷歌内核的浏览器使用的是UTF-8编码。
 //	对于POST来说
POST请求参数一般被加在请求体。由于不是在URL中，所以没有字符必须是ASCII码的限制，可以是任意字符，即`POST请求参数一般没有编码要求`

`7.请求参数的格式`
GET请求参数只能是请求字符串格式（键值对形式）

POST请求参数可以是xml格式（text/xml），json格式（application/json），请求字符串格式（application/x-www-form-urlencode），文件的二进制数据格式（multipart/form-data