优势
1. 兼容性，vue2、vue3都可以使用
2. 抛弃了 Mutations 的操作，只有 state 、 getters 和 actions. 极大的简化了状态管理库的使用，让代码编写
更加容易直观。
3. 可以直接修改 state
4. 扁平化、独立化，每个仓库独立
安装配置
1. 安装 npm i pinia
2. 在 main.js 中创建 pinia 实例并安装
1. import { createApp } from 'vue' import App from './App.vue' // 导入pinia import { createPinia } from 'pinia'; // vue实例 const app = createApp(App) // 在vue实例上安装pinia app.use(createPinia()) app.mount('#app')
3. 新建 store 文件夹，在其中新建 js 文件
import { defineStore } from 'pinia'; // 创建仓库 // 变量名必须use开头，defineStore第一参数是仓库id，第二个是配置 const useUser = defineStore('user', { state() { return { // 数据 } }, getters: { }, actions: { } }) export default useUser;
使用
state
在 state 中添加数据
state() { return { // 数据 count: 0 } }, 2.
在需要的页面中引入 useUser 使用
import useUser from '../store/user.js'; const user = useUser() console.log(user.count);
getters
在 getters 中添加函数
getters: { getCount() { return this.count * 10; } },
在需要的页面中引入 useUser 使用
import useUser from '../store/user.js'; const user = useUser() console.log(user.getCount);
修改
直接修改
直接在页面中修改 state 即可
import useUser from '../store/user.js'; const user = useUser() console.log(user); let change = () => { // 直接修改 user.count++ }
$patch 同时修改多个
比一个一个修改性能好
import useUser from '../store/user.js'; let user = useUser() const change = () => { // 同时修改多个 user.$patch({ count: user.count + 1, msg: 'hello pinia!' }) }
$patch 修改数组或对象
这种方法适合复杂数据的修改，比如数组、对象的修改 , 因为它们的修改非常困难或代价高昂
import useUser from '../store/user.js'; let user = useUser() const change = () => { user.$patch((state) => { // 修改数组、对象 state.userItems.push({ name: 'shoes', quantity: 1 }) state.userInfo.name = '李四' }) }
$state
将 state 替换成新的对象
import useUser from '../store/user.js'; let user = useUser() const change = () => { user.$state = { count : 1, name : '张三' } }
actions
1. 在 actions 中新建方法
actions: { changeCount(data) { // 通过this取值改值，所以不要使用箭头函数 this.count++ } }
2. 在需要的地方调用
import useUser from '../store/user.js'; let user = useUser() const change = () => { user.changeCount(123) }
