目录
一、Pinia是什么
二、Pinia使用
1.基本使用
5.模块化
一、Pinia是什么
首先来看下面这张图:
所以:伴随vue2到vue3的升级,官方已经用Pinia代替了Vuex成为官方的状态管理库。
并且在vue2英文文档中专门有说到:
翻译如下:
所以,推荐使用Pinia作为以后不论是vue2还是vue3状态管理库的首选!
二、Pinia使用
1.基本使用
1.安装
yarn add pinia
# 或者使用 npm
npm install pinia
在中,创建根存储
import { createPinia } from 'pinia'
(createPinia())
2.创建store
store实例相当于一个容器,里面存放的有类似于data,计算属性,方法之类的东西。通过defineStore()方法定义
在src下面创建一个store文件夹,再创建与之对应的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/'
const store = useUser()
(store)
</script>
4.添加state
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数是配置对象
export const useUser = defineStore('user', {
// state是一个函数,返回一个对象
state: () => {
return {
userName: 'jack',
avatar: '/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/'
}
}
})
1.读取state
import { storeToRefs } from 'pinia'
const userStore = useUser()
// 如果直接解构出数据,这个数据不是响应式的。如果想要变成响应式的,需要调用storeToRefs方法
const { userName, avatar } = storeToRefs(userStore)
2.修改state
= '张三'
3.批量修改state
// 可以用来修改单个属性
userStore.$patch({
userName: '张三'
})
// 这种回调函数的形式适合修改集合类的数据,比如数组
userStore.$patch((state) => {
= '/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/'
})
4.重置state
// 重置
userStore.$reset()
5.直接替换整个state(几乎不用)
// 替换
userStore.$state = { userName: 'rose', avatar: '/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/' }
1.基础使用
类似计算属性。推荐里面传递一个形参的写法,不容易出错。
getters: {
isAdult: (state) => {
return >= 18 ? '成年人' : '未成年'
}
}
获取
// 直接获取
<div>{{}}</div>
2.调用本模块其他getters
getters: {
isAdult: (state) => {
return >= 18 ? '成年人' : '未成年'
},
msg: (state) => {
// msg这个getter访问了自身的getter(isAdult)
return +
}
}
传参
getters: {
isAdmin: (state) => {
// 如果getter里面是返回的函数,那么它就可以传参数了
return (name) => name === 'admin' ? '是管理员' : '不是管理员'
}
}
调用:
{{}}
4.调用其他store里面的getter
商品模块
import { defineStore } from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数是配置对象
export const useGoods = defineStore('goods', {
// state是一个函数,返回一个对象
state: () => {
return {
goodsName: 'iphone'
}
},
getters: {
newIphone: (state) => {
return + ' 14 pro'
}
}
})
想在user模块的getter中去获取goods模块的newIphone这个getter
import { useGoods } from './'
// ..........
getters: {
info: (state) => {
// 获取goods模块的store
const goodsStore = useGoods()
return + '买了' +
}
}
actions: {
// 这里的方法要写成普通函数,因为里面需要通过this去访问state里面的数据
changeNameAsync (newName) {
setTimeout(() => {
// actions里面可以访问state
= 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/
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>
更多详情可见:PiniaThe Vue Store that you will enjoy usinghttps:///
码字不易,望各位未来大牛点赞支持一波~