状态管理（pinia）

相当于 vuex5

目录

优势

 安装配置

使用

修改

---

优势

1. 兼容性，vue2、vue3都可以使用

2. 抛弃了 Mutations 的操作，只有 state 、 getters 和 actions. 极大的简化了状态管理库的使用，让代码编写

更加容易直观。

3. 可以直接修改 state

4. 扁平化、独立化，每个仓库独立

 安装配置

1. 安装 npm i pinia

2. 在 main.js 中创建 pinia 实例并安装

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
}
},

在需要的页面中引入 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)
}