vuex和pinia的区别
-
pinia没有mutations,只有state,getters,actions
-
pinia分模块不需要modules(vuex需要modules)
-
ts支持的很好
-
自动代码拆分
-
pinia体积更小,性能更好
-
pinia可以直接修改state数据,vuex需要通过mutations提交
安装pinia
npm install pinia -save
或者
yarn add pinia
使用
创建大仓库
在src里新建store文件夹在store里新建index.js写入下面代码
import {createPinia} from 'pinia'
const pinia = createPinia()
export default pinia
在main.js引入pinia并注册
import pinia from './store/index'
app.use(pinia)
在store 创建小仓库文件夹modules
在modules下新建 小仓库 user.js
import {defineStore} from 'pinia';
import { ref } from 'vue'
//组合式api写法 更vue3setup语法糖使用相同
export const pageStore = defineStore('page', () => {
//向使用组合式api一样使用
const clientWidth = ref(768) //定义变量
const changwidth = (val:number)=>{ // 修改数据
clientWidth.value = val
}
return { //必须返回出去
clientWidth,
changwidth
}
})
//vuex那种写法
export const useMainStore = defineStore('main', {
//state类似于组件的data,用来存储全局状态
state:()=>{ //必须是箭头函数
return {
num:1
}
},
//pinia没有了methods
//get相当于组件的计算属性,用来封装计算属性,有缓存
getters:{
dbnum(state){
return state.num+2
}
},
//封装业务逻辑,修改state参数
actions:{
},
})
页面使用
import { pageStore } from '@/store/modules/user';
const store = pageStore();
import { storeToRefs } from "pinia";
let { clientWidth } = storeToRefs(store); //响应式结构 也可通过store.clientWidth 直接拿到
修改数据
//在要修改的页面通过事件
const add =()=>{
store.addnum()//通过store.调用actions中定义的方法
store.$patch({ //也可以通过store.$patch可直接更改
num:5
})
store.$patch(state=>{ //也可以通过store.$patch可直接更改state为pinia里的state
state.num++
})
}
//在store里的actions定义上面调用的方法
actions:{
addnum(){
this.num++ //state里的数据直接通过this
}
}
pinia数据持久化
插件安装:
npm i pinia-plugin-persist -S
参考
Pinia实现数据持久化存储_G_ing的博客-CSDN博客
通过 Pinia 插件快速实现持久化存储