vue3中pinia的学习使用

最新推荐文章于 2024-10-08 22:43:04 发布

zhousenshan

最新推荐文章于 2024-10-08 22:43:04 发布

阅读量2k

点赞数 1

分类专栏： vue3前端技术文章标签：学习前端 javascript

原文链接：https://www.cnblogs.com/foxing/p/15850585.html

版权

vue3前端技术专栏收录该内容

105 篇文章 14 订阅

订阅专栏

本文介绍了Pinia作为Vue3的状态管理库的特点，包括完整typescript支持、轻量级体积、简化API等。通过示例展示了如何创建和使用store，以及在实际项目中如何导入和操作全局状态。Pinia消除了mutations，提供了同步和异步actions，且支持自由的store间通信。学习资源包括官方文档和哔哩哔哩上的教程视频。

摘要由CSDN通过智能技术生成

听说pinia与vue3更配,便开启了vue3的学习之路(本文只适合vue3)

pinia特点：

　　1.完整的 typescript 的支持

　　2.足够轻量，压缩后的体积只有1.6kb

　　3.去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）

　　4.actions 支持同步和异步

　　5.没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割

　　6.无需手动添加 store，store 一旦创建便会自动添加

官网: Pinia

学习参考: 抛弃 Vuex，使用 Pinia_哔哩哔哩_bilibili

安装依赖

npm install pinia

main.js引入

import { createPinia } from 'pinia'
app.use(createPinia())

创建store文件夹和index.ts文件

import { defineStore } from 'pinia'

// 定义并导出容器
// 1.容器id唯一,pinia会将容器挂载到根容器
export const userStore = defineStore({
  id:'user',
  state: () => ({
    // 类似组件的data,用来存储全局状态
    // 必须是函数:避免在服务端渲染的时候交叉请求导致数据污染
    // 必须是箭头函数: ts更好的类型推导
    count:0,
    name:'张三',
    id:''
  }),
  getters:{
    // 类似组件的computed,用来封装计算属性,用缓存功能
    // 若使用this,则必须手动指定返回类型,否则类型推导不出
    // 函数接受一个可选对象state
    // count10 (): number {
    //   return this.count + 10
    // }
    count10 (state){
      return state.count + 10
    }
  },
  actions: {
    // 分装业务逻辑 ,修改state
    // 不能使用箭头函数定义action,因为箭头函数绑定外部this
    //
    logout() {
      this.$patch({
        name: '',

      })
    },

    // async login(user, password) {
    //   const userData = await apiLogin(user, password)

    //   this.$patch({
    //     name: user,
    //     ...userData,
    //   })
    // },
  },
})
export default userStore

读取使用:

import { defineStore } from 'pinia'

// 定义并导出容器
// 1.容器id唯一,pinia会将容器挂载到根容器
export const userStore = defineStore({
  id:'user',
  state: () => ({
    // 类似组件的data,用来存储全局状态
    // 必须是函数:避免在服务端渲染的时候交叉请求导致数据污染
    // 必须是箭头函数: ts更好的类型推导
    count:0,
    name:'张三',
    id:''
  }),
  getters:{
    // 类似组件的computed,用来封装计算属性,用缓存功能
    // 若使用this,则必须手动指定返回类型,否则类型推导不出
    // 函数接受一个可选对象state
    // count10 (): number {
    //   return this.count + 10
    // }
    count10 (state){
      return state.count + 10
    }
  },
  actions: {
    // 分装业务逻辑 ,修改state
    // 不能使用箭头函数定义action,因为箭头函数绑定外部this
    //
    logout() {
      this.$patch({
        name: '',

      })
    },

    // async login(user, password) {
    //   const userData = await apiLogin(user, password)

    //   this.$patch({
    //     name: user,
    //     ...userData,
    //   })
    // },
  },
})
export default userStore