Vue3新的状态管理库-Pinia(保姆级别教程)

简介: Vue3新的状态管理库-Pinia(保姆级别教程)

1.什么是Pinia

Pinia是Vue的专属的最新状态管理库, 是Vuex状态管理工具的替代品

vue.js官网 https://cn.vuejs.org/guide/introduction.html

Pina网址:https://pinia.vuejs.org/zh/

2.为什么使用Pinia

  • 2.1.提供了更加简单的API(去掉了mutation)
  • 2.2.提供了符合组合式风格的API(和Vue3新语法统一)
  • 2.3.去掉了modules的概念, 每一个store都是独立的模块
  • 2.4.搭配TypeScript一起使用提供可靠的类型推断

3.创建项目

npm init vue@latest

cd vue3-vite-pinia
 npm install
 npm run dev

4.检查Pinia的安装版本

打开package是否安装上Pinia
```javascript
  "dependencies": {
    "pinia": "^2.1.6",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },

5.main.js引入Pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

6.定义Store-组合式API写法(推荐)

与 Vue 组合式 API 的 setup 函数 相似,我们可以传入一个函数,该函数定义了一些响应式属性和方法,并且返回一个带有我们想暴露出去的属性和方法的对象。

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  // 实现getter
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
// 获取接口返回的数组
// const arrList = ref([])
// const getList = async()=>{
//   const res = await axios.get(BASE_URL)
//   if(res.state == 'ok'){
//     arrList.value = res.data
//   }
// }
  return { count, doubleCount, increment }
})

7.getters的实现

Pinia中的getters直接使用computed函数进行模拟

8.action的异步实现

action中实现异步和组件中定义数据和方法的风格完全一致

安装axios

npm install axios

查看axios

编写action函数

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  // 实现getter
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
// 获取接口返回的数组
const arrList = ref([])
const getList = async()=>{
  const res = await axios.get(BASE_URL)
  if(res.state == 'ok'){
    arrList.value = res.data
  }
}
  return { count, doubleCount, increment }
})

9.storeToRefs

显而易见这样的写法会导致响应式的丢失

那么我们使用storeToRefs函数可以腐竹保持数据(state+getter)的响应式解构

目录
相关文章
|
1天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
10 0
|
1天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
8 0
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
7 1
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
2天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
8 0
|
1天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
7 1
|
2天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
9 0