vuex与pinia对比
- 都支持选项式API和组合式API
- pinia没有mutations,只有:state,getters,actions
- pinia分模块不需要modules
- pinia的TS支持很好
- pinia可以自动化拆分代码
- pinia的体积更小,性能更好
- pinia可以直接修改数据,使用storeToRefs,直接修改pinia的值, vuex需要在计算属性中才能修改
pinia使用
安装:
npm i pinia
在main.ts中引入
import { createApp } from 'vue';
//挂载在app上
createApp(App).use(router).use(createPinia()).mount('#app');
新建store文件夹,新建index.ts
import { defineStore } from 'pinia';
export const userStore = defineStore('storeId', {
state: () => {
return {
num: 17,
age: '48',
name: '苦哈哈',
};
},
getters: {
changeNum() {
return this.num + 10;
},
},
// 同步和异步都可以写
actions: {
upNum(val) {
this.num += val;
},
},
});
在文件中使用
<template>
<div>
<h1>pinia</h1>
<span>getters:{{ changeNum }}</span>
<div
><h1>{{ num }}</h1></div
><div
><h1>{{ name }}</h1></div
><div
><h1>{{ age }}</h1></div
>
<div><button @click="changePinia">修改pinia值</button></div>
<div><button @click="changeActions">修改actions值</button></div>
</div>
</template>
<script setup>
// 解构pinia的值,可变成响应式的值
import { storeToRefs } from 'pinia';
import { userStore } from './store/index';
const store = userStore();
// 解构
let { name, num, age, changeNum } = storeToRefs(store);
const changePinia = () => {
name.value = '垃圾桶';
// 批量更新
store.$patch((state) => {
state.name = 'ooooooo';
});
};
const changeActions = () => {
store.upNum(20);
};
</script>
<style></style>
模块划分
pinia可以根据名称直接划分模块,不需要借助modules
新建user.ts,shop.ts
import { defineStore } from 'pinia';
export const user = defineStore('user', {
state: () => {
return {
username: 'Admin',
};
},
getters: {
changeNum() {
return this.username + '今天是周三';
},
},
actions: {
changeUsername(val){
this.username = val
}
},
});
import { defineStore } from 'pinia';
export const shop = defineStore('shop', {
state: () => {
return {
goods: ['鞋子', '珠宝', '包包'],
akf: '0000000',
};
},
getters: {
changeGoods() {},
},
actions: {
changeCoodsname() {},
},
});
在文件中使用
<template>
<div>
<h1>pinia模块{{ username }}</h1>
<span>getters:{{ changeNum }}</span>
<div><button @click="changePinia">修改pinia值</button></div>
<div><button @click="changeUsername">修改userName值</button></div>
<hr />
<h1>GOODS-----{{ akf }}</h1>
{{ goods }}
</div>
</template>
<script setup>
// 解构pinia的值,可变成响应式的值
import { storeToRefs } from 'pinia';
import { user } from '../store/user';
import { shop } from '../store/shop';
const store = user();
const GOODS = shop();
// 解构
let { username, changeNum } = storeToRefs(store);
let { goods, akf } = storeToRefs(GOODS);
const changePinia = () => {
username.value = '垃圾桶';
// 批量更新
store.$patch((state) => {
state.name = 'ooooooo';
});
};
const changeUsername = () => {
store.changeUsername('百事从欢');
};
</script>
<style></style>
pinia持久化
npm i pinia-plugin-persistedstate -S
在main.ts中引用
import piniaStore from './store';
createApp(App).use(router).use(piniaStore).mount('#app');
index.ts
import { createPinia } from 'pinia';
import { useAppStore } from './modules/app';
import { useUserStore } from './modules/user';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export { useAppStore, useUserStore };
export default pinia;
app.ts
import { createPinia } from 'pinia';
import { useAppStore } from './modules/app';
import { useUserStore } from './modules/user';
//引入持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
//使用插件
export { useAppStore, useUserStore };
export default pinia;
在模块中开启缓存
import { defineStore } from 'pinia';
import piniaStore from '/@/store/index';
export const useAppStore = defineStore(
// 唯一ID
'app',
{
state: () => ({
title: 'FastVue3,一个快速开箱即用的Vue3+Vite模板',
}),
getters: {},
actions: { },
//配置缓存
persist: {
key: 'theme',
//存储在localstorage还是sessionStorage中
storage: localStorage,
//哪个数据需要持久化
paths: ['theme'],
},
},
);