相当于
vuex5
优势
1. 兼容性,vue2、vue3都可以使用
2. 抛弃了 Mutations 的操作,只有 state 、 getters 和 actions. 极大的简化了状态管理库的使用,让代码编写更加容易直观。3. 可以直接修改 state4. 扁平化、独立化,每个仓库独立
安装配置
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)
}