Vue状态管理工具pinia的简单使用

简介: Pinia 是一个 Vue 状态管理工具,它是 Vue 3 官方推荐的状态管理库之一。Pinia 的目标是提供一个简单、轻量级的状态管理解决方案,它基于 Vue 3 的新响应式 API 和新的组合式 API 构建,使用起来非常直观和自然。

34. Vue状态管理工具pinia的简单使用

1. 介绍

Pinia 是一个 Vue 状态管理工具,它是 Vue 3 官方推荐的状态管理库之一。Pinia 的目标是提供一个简单、轻量级的状态管理解决方案,它基于 Vue 3 的新响应式 API 和新的组合式 API 构建,使用起来非常直观和自然。

2. pinia在vue3中的使用

  • 首先在项目中安装pinia,执行npm install pinia,然后在入口文件main.js中引入
  • 我们选择与 Vue 的选项式 API 类似的方式,传入一个带有 stateactionsgetters 属性的 Option 对象
  • 你可以认为 statestore 的数据 (data)gettersstore 的计算属性 (computed),而 actions 则是方法 (methods)
// main.js
import {
    createApp } from 'vue'
import {
    createPinia } from "pinia"
import App from './App.vue'
import './assets/main.css'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
  • 创建一个store
// src/store/user.js
import {
    defineStore } from "pinia"

export const useUserStore = defineStore({
   
  id: "user"
})
  • 定义state,并引入使用
// src/store/user.js
import {
    defineStore } from "pinia"

export const useUserStore = defineStore({
   
  id: "user",
  state: () => {
   
    return {
   
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  }
})
// src/pages/user.vue
<template>
  <div class="user">
    {
  { user.firstName }} -- {
  { user.lastName }}
  </div>
</template>

<script setup>
import {
     useUserStore } from "../store/user"
const user = useUserStore()
</script>
  • 定义getter并引入使用
// src/store/user.js
import {
    defineStore } from "pinia"

export const useUserStore = defineStore({
   
  id: "user",
  state: () => {
   
    return {
   
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  },
  getters: {
   
    fullName(state) {
   
      return state.firstName + " " + state.lastName
    }
  }
})
// src/pages/user.vue
<template>
  <div class="user">
    {
  { user.fullName }}
  </div>
</template>

<script setup>
import {
     useUserStore } from "../store/user"
const user = useUserStore()
console.log(user.fullName);
</script>
  • 定义action并使用,action中的方法可同步也可异步。
// src/store/user.js
import {
    defineStore } from "pinia"

function apiGetData(name) {
   
  return new Promise((resolve, reject) => {
   
    setTimeout(() => {
   
      if(name === "Jack Joe") {
   
        resolve({
    age: 18 })
      } else {
   
        reject({
    msg: "查无此人!" })
      }
    }, 2000);
  })
}
export const useUserStore = defineStore({
   
  id: "user",
  state: () => {
   
    return {
   
      firstName: "Jack",
      lastName: "Joe",
      age: 18
    }
  },
  actions: {
   
    changeName(name) {
   
      [ this.firstName, this.lastName ] = name.split(" ")
    },
    async getUserData(name) {
   
      try {
   
        const res = await apiGetData(name)
        return res
      } catch(err) {
   
        return err
      }
    }
  },
  getters: {
   
    fullName(state) {
   
      return state.firstName + " " + state.lastName
    }
  }
})
// src/pages/user.vue
<template>
  <div class="user">
    {
  { user.fullName }}
  </div>
</template>
<script setup>
import {
    } from "vue"
import {
     useUserStore } from "../store/user"

const user = useUserStore()
console.log(user.fullName);
//同步方法
user.changeName("Marry Gren")
//异步方法
const getUser = async () => {
    
  const userData = await user.getUserData("Jack Joe")
  console.log(userData);// {age: 18}
}
getUser()
</script>
相关文章
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
7 1
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
5 0
|
1天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
7 1
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1
|
2天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
9 0
|
2天前
|
JavaScript
vue知识点
vue知识点
10 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
990 0
|
2天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期