pinia

安装

npm install pinia

定义api

export function 请求函数 = (传入参数) => {
 return request({
   url: // 请求地址,
   method: // 请求方法,
   data: {请求参数}
 })
}

定义stroe

// 将请求函数引入store/文件内
import { defineStore } from 'pinia'
import {请求函数} from '@/store/文件'
export const 处理函数 = defineStore('模块名', {
  state:(): any => {
    //数据
    arr:[]
  },
  actions: {
   async updateArr(传入请求参数) {
     const res = await getArr(传入请求参数)
     this.arr = res
   }
  }
 }

页面内调用

import { 处理函数 } from '@/store/模块名'
// 定义store
const store = 处理函数()
// 从stroe中结构出所需数据
const { arr } = storeToRefs(store)
// 调用更新函数
store.updateArr(请求参数)

记录点:

  1. store不能进行解构会破坏响应式 storeToRefs保持响应式
  2. store模块中可以直接解构出所需的数据 无需发请求 设定默认值 可实现双向绑定 更改页面数据同时更改store模块中的数据

本文系作者 @ 原创发布在 IT梦。未经许可,禁止转载。

喜欢()
0 0 投票数
Article Rating
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
热门搜索
90 文章
0 评论
2 喜欢
Top
0
希望看到您的想法,请您发表评论x