(学习笔记)抛弃 Vuex,使用 Pinia

简介: (学习笔记)抛弃 Vuex,使用 Pinia



学习视频

06 Pinia和VueDevtools_哔哩哔哩_bilibili

一、环境初始化

1.创建项目

$ yarn create vite

2.安装pinia

$ yarn add pinia

二、基本使用

1.创建pinia示例并挂载

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
// 挂载到根实例上
createApp(App).use(pinia).mount('#app')

2.基本使用

import { defineStore } from "pinia"
// 1.定义并导出容器
// 参数1:容器的ID,必须唯一,将来Pinia会把所有的容器挂载到根容器,每个容器的名字就是这里的ID
export const useMainStore = defineStore('main', {
  /**
   * 类似与组件的data, 用来存储全局状态
   * 1.必须是函数:这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染(客户端其实无所谓)
   * 2.必须是箭头函数:为了更好的ts类型推导
   * 返回值:一个函数,调用该函数即可得到容器实例
   */
  state: () => {
    return {
      count: 100,
      foo: 'bar',
      arr: [1, 2, 3]
    }
  },
  /**
   * 类似于组件的computed,用来封装计算属性,有【缓存】功能
   */
  getters: {
    // 每个函数接受一个可选参数:state状态对象
    // count10(state) {
    //   console.log('count10()调用了');// 具有缓存功能
    //   return state.count + 10
    // }
    // (不建议)如果不使用state而使用this,此时就不能对返回值类型做自动推导了,必须手动指定
    count10(): number {
      return this.count + 10
    }
  },
  /**
   * 完全类比于Vue2组件中的methods(可以直接用this),用来【封装业务逻辑】,修改state
   */
  actions: {
    /**
     * 注意!!不能使用箭头函数定义actions!!一定要用普通函数!!!
     * why?因为箭头函数绑定了外部this
     */
    changeState(num: number) {
      // 可以直接使用this,像极了Vue2
      // this.count++
      // this.foo = 'hello'
      // this.arr.push(4)
      // 对于批量修改,建议使用patch做优化
      this.$patch((state) => {
        state.count += num
        state.foo = 'hello'
        state.arr.push(4)
      })
    }
  }
})
// 2.容器中的state
// 3.修改state
// 4.actions的使用

打开App.vue,砍掉没用的,我们直接使用项目中HelloWorld.vue组件

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
  <HelloWorld />
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

下面是HelloWorld.vue的内容

<template>
  <p>{{ mainStore.count }}</p>
  <p>{{ mainStore.foo }}</p>
  <p>{{ mainStore.arr }}</p>
  <p>{{ mainStore.count10 }}</p>
  <p>{{ mainStore.count10 }}</p>
  <p>{{ mainStore.count10 }}</p>
  <hr />
  <p>{{ count }}</p>
  <p>{{ foo }}</p>
  <p>
    <button @click="handleChangeState">修改数据</button>
  </p>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '../store'
// 【哪里使用写哪里】,此时要在HelloWorld组件中用,那就写这里。这很Composition API
const mainStore = useMainStore() 
// 禁止!这样会丧失响应性,因为pinia在底层将state用reactive做了处理
// const { count, foo } = mainStore
// 解决方案:将结构出的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore)
const handleChangeState = () => {
  // ==============数据修改的几种方式=============
  // 方式一:直接修改
  // mainStore.count++
  // 方式二:使用 $patch(对象) 批量修改,建议使用,底层做了性能优化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   foo: 'hello',
  //   arr: [...mainStore.arr, 4] // 这就不优雅了,所以有了方式三
  // })
  // 方式三:使用 $patch(回调函数),这个更优雅,墙裂推荐!!!
  // 回调函数中的state参数,就是Store定义时里面的state!
  // mainStore.$patch((state) => {
  //   state.count++
  //   state.foo = 'hello'
  //   state.arr.push(4)
  // })
  // 方式四:逻辑较为复杂时,应封装到Store的actions中,并对外暴露接口
  mainStore.changeState(10)
}
</script>
目录
相关文章
|
监控 关系型数据库 MySQL
轻松入门MySQL:主键设计的智慧,构建高效数据库的三种策略解析(5)
轻松入门MySQL:主键设计的智慧,构建高效数据库的三种策略解析(5)
666 0
|
编解码 算法 计算机视觉
【MATLAB】 小波分解信号分解+FFT傅里叶频谱变换组合算法
【MATLAB】 小波分解信号分解+FFT傅里叶频谱变换组合算法
551 0
|
大数据
《大数据之路:阿里巴巴大数据实践》| 每天读本书
本书是为了满足不断变化的业务需求,同时实现系统的高度扩展性、灵活性以及数据展现的高性能而设计的。
4062 0
|
4月前
|
机器学习/深度学习 人工智能 自然语言处理
当无人机遇上Agentic AI:新的应用场景及挑战
本文简介了Agentic AI与AI Agents的不同、Agentic无人机的概念、应用场景、以及所面临的挑战
448 5
当无人机遇上Agentic AI:新的应用场景及挑战
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
768 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
11月前
|
UED 开发者
移动应用性能优化实战
移动应用性能优化实战
277 89
|
7月前
|
前端开发 数据处理
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法,能有效提升数据处理的效率。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
前端开发 测试技术 API
我同学不知道UnoCSS是什么,我教他用之后效率直接倍增
原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧且用途单一的 class,并且会以视觉效果进行命名。可以将原子化的 CSS 框架理解为这类 CSS 的统称
822 5
|
运维 NoSQL MongoDB
MongoDB有必要升级新版本吗?
如果你在 MongoDB 升级时需要协助,阿里云的专家还将为您提供升级规划建议,识别和缓解升级时可能出现的障碍、不兼容问题和潜在的性能问题。
3017 1
|
监控 关系型数据库 MySQL
如何升级mysql的版本
如何升级mysql的版本
1325 2