【一文搞定Pinia】超详细的Pinia教程，比Vuex香太多了！

小五Five

已于 2023-05-16 10:50:05 修改

阅读量2.5w

点赞数 88

分类专栏： vue 文章标签：前端 vue javascript

于 2022-12-10 21:17:21 首次发布

本文链接：https://blog.csdn.net/weixin_42373175/article/details/128268962

版权

vue 专栏收录该内容

28 篇文章

订阅专栏

一、Pinia是什么

首先来看下面这张图：

所以：伴随vue2到vue3的升级，官方已经用Pinia代替了Vuex成为官方的状态管理库。

并且在vue2英文文档中专门有说到：

翻译如下：

所以，推荐使用Pinia作为以后不论是vue2还是vue3状态管理库的首选！

二、Pinia使用

1.基本使用

1.安装

yarn add pinia
# 或者使用 npm
npm install pinia

在mian.js中，创建根存储

import { createPinia } from 'pinia'

app.use(createPinia())

2.创建store

store实例相当于一个容器，里面存放的有类似于data，计算属性，方法之类的东西。通过defineStore()方法定义

在src下面创建一个store文件夹，再创建与之对应的js文件，比如user.js

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useUser = defineStore('user', {
  // other options...
})

3.使用store

<script setup>
import { useUser } from '@/store/user.js'
const store = useUser()
console.log(store)
</script>

4.添加state

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数是配置对象
export const useUser = defineStore('user', {
  // state是一个函数，返回一个对象
  state: () => {
    return {
      userName: 'jack',
      avatar: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/363.jpg'
    }
  }
})

2.state

1.读取state

import { storeToRefs } from 'pinia'
const userStore = useUser()
// 如果直接解构出数据，这个数据不是响应式的。如果想要变成响应式的，需要调用storeToRefs方法
const { userName, avatar } = storeToRefs(userStore)

2.修改state

userStore.userName = '张三'

3.批量修改state

// 可以用来修改单个属性
userStore.$patch({
  userName: '张三'
})
    
// 这种回调函数的形式适合修改集合类的数据，比如数组
userStore.$patch((state) => {
  state.avatar = 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/596.jpg'
})

4.重置state

// 重置
  userStore.$reset()

5.直接替换整个state（几乎不用）

// 替换
userStore.$state = { userName: 'rose', avatar: 'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/854.jpg' }

3.getters

1.基础使用

类似计算属性。推荐里面传递一个形参的写法，不容易出错。

  getters: {
    isAdult: (state) => {
      return state.age >= 18 ? '成年人' : '未成年'
    }
  }

获取

// 直接获取
<div>{{userStore.isAdult}}</div>

2.调用本模块其他getters

  getters: {
    isAdult: (state) => {
      return state.age >= 18 ? '成年人' : '未成年'
    },
    msg: (state) => {
      // msg这个getter访问了自身的getter（isAdult）
      return state.userName + state.isAdult
    }
  }

3.getters传参

  getters: {
    isAdmin: (state) => {
      // 如果getter里面是返回的函数，那么它就可以传参数了
      return (name) => name === 'admin' ? '是管理员' : '不是管理员'
    }
  }

调用：

{{userStore.isAdmin}}

4.调用其他store里面的getter

商品模块goods.js

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数是配置对象
export const useGoods = defineStore('goods', {
  // state是一个函数，返回一个对象
  state: () => {
    return {
      goodsName: 'iphone'
    }
  },
  getters: {
    newIphone: (state) => {
      return state.goodsName + ' 14 pro'
    }
  }
})

想在user模块的getter中去获取goods模块的newIphone这个getter

import { useGoods } from './goods.js'
// ..........
getters: {
    info: (state) => {
      // 获取goods模块的store
      const goodsStore = useGoods()
      return state.userName + '买了' + goodsStore.newIphone
    }
}

4.actions

  actions: {
    // 这里的方法要写成普通函数，因为里面需要通过this去访问state里面的数据
    changeNameAsync (newName) {
      setTimeout(() => {
        // actions里面可以访问state
        this.userName = newName
      }, 1000)
    }
  }

5.模块化

在实际开发中，不可能把多个模块的数据都定义到一个store中，而是一个模块对应一个store，最后通过一个根store进行整合

1.随便建立两个store，并导出

// 模块一
import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'haha',
      age: 18,
    }
  },
})

export default useUserStore

// 模块二
import { defineStore } from 'pinia'

const useCounterStore = defineStore('user', {
  state: () => {
    return {
      count: 1
    }
  },
})

export default useUserStore

2.新建store/index.js

import useUserStore from './user'
import useCounterStore from './counter'

// 统一导出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

3.组件中使用

<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()

// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count } = storeToRefs(counter)
</script>