pinia

* 1.pinia去除 mutations,modules<模块分割>，只有 state，getters，actions;
* <vueX 修改state的值都需要commit 一个mutations里的修改函数来修改，来达到追踪数据>
* <vueX actions 处理异步时还需要dispatch 一个mutations里的修改函数来修改>
* 2. pinia 可以直接修改state或者$patch 或者调用actions中的方法 ，action支持同步和异步
* 3.没有modules模块，只有 store 的概念，store 之间可以自由使用，相互调用，更好的代码分割；
* 4.足够轻量，压缩后的体积只有1.6kb;vueX 44kb
* 5.支持持久化插件扩展，无需像vueX另外另外处理数据存储

安装

npm install pinia --save

在main.ts挂载

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia} from 'pinia'
// 使用pinia持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
createApp(App).use(pinia)

createApp(App).mount('#app')

定义State

在 src/store 下面创建一个user.ts

import { defineStore } from 'pinia';
//引入另一个store.js 调用:carStore().方法名
import { carStore } from './car'

const mainStore = defineStore({
  id: 'user', // id必填，且需要唯一
  state: () => {
    return {
      name: 'xiaoming',
      age: 18,
    };
  },
  //类似于vue中的计算属性，自动监听对应state的变化，从而动态计算返回值
  //有缓存特性，如果值没有改变，多次使用也只会调用一次
  getters: {
    getAge(state) {
      console.log('getters被调用了');
      return state.name + '嘻嘻嘻'
    },
  },
  actions: {
    //actions中支持同步和异步方法
    changeState() {
      this.age++;
    },
    opt(){
        return new Promise<string>((resolve, reject) => {
            setTimeout(()=>{
                resolve('Promise')
            },3000)
        })
    },
    async fun(){
        //action 间的方法相互调用，直接用 this 访问即可。
        let data =await this.opt();
        this.name = data;
        console.log(carStore().getCarName('传值了'))//调用了carStore里的事件传值了
    }
  },
   //数据缓存 sessionStorage 
   //页面刷新后存储的state不会消失,state中数据和存储的数据同步变化
   persist: {
    enabled: true,
    strategies: [
        {
          storage: localStorage, //改为存储到localStorage
          paths: ['age'] //只持久化 age
        }
    ]
  }
});
export { mainStore };

定义car.ts

import { defineStore } from 'pinia';
const carStore = defineStore({
  id: 'car',
  state: () => {
    return {
      name: 'BBA',
    };
  },
  actions: {
    getCarName(data:string){
        return '调用了carStore里的事件'+data
    }
  },
});
export {
    carStore
}

使用

<template>
  {{name}}
  {{age}}
  <div><button @click="add">简单修改数据</button></div>
  <div><button @click="addMore">多条数据修改</button></div>
  <div><button @click="action">action修改同步</button></div>
  <div><button @click="store.fun">action修改异步</button></div>
  {{store.getAge}}
</template>

<script lang="ts" setup>
import {mainStore } from './store/index'
import { storeToRefs } from 'pinia';  //当state中有多个数据时，可以使用Pinia解构方法：storeToRefs 
const store = mainStore()
const {name,age} = storeToRefs(store) //解构
//修改state中的数据
//1.简单数据修改-------- 操作store.属性名 来修改
//2.多条数据修改------ $patch的方式是优化过的，会加快修改速度，对性能有很大好处，适合操作多条数据
//$patch + 对象 或者 $patch + 函数(state) //state 就是 store 仓库中的 state
//3.actions修改  Store.actions中添加方法 然后调用 store.方法名
const add = ()=>{
  store.age+=1
}
const addMore =()=>{
  // store.$patch({
  //   name:store.name+'X',
  //   age:store.age+2
  // })
  store.$patch((state:any)=>{
    state.name=state.name+'X';
    state.age =state.age+2
  })
}
const action=()=>{
  store.changeState();
  //重置state的数据
  store.$reset()
  
}
</script>