状态管理pinia

vuex和pinia的区别

1. pinia没有mutations，只有state，getters，actions

2. pinia分模块不需要modules（vuex需要modules）

3. ts支持的很好

4. 自动代码拆分

5. pinia体积更小，性能更好

6. 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 插件快速实现持久化存储