Pinia的使用方法-ts（以及pinia持久化）

Pinia的使用方法-ts（以及pinia持久化）

1、安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

npm install pinia-plugin-persistedstate --save

2、main.js中引入使用

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

//这2步是使用pinia持久化时需要
import piniaPluginPersistedstate  from 'pinia-plugin-persistedstate' //pinia持久化
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)// 使用持久化插件

const app = createApp(App)
app.use(pinia)

3、使用

（1）在src下面创建文件夹stores

（2）在stores文件夹下面创建index.ts文件

（3）index.ts文件中写代码（Option store,选项式APi）

import { ref, reactive, computed } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'

//Option store,选项式APi
export const useAgeStore = defineStore('xuzz',{
  // 为了完整类型推理，推荐使用箭头函数
  state:()=>{
    // 在 Pinia 中，state 被定义为一个返回初始状态的函数。
    // 这使得 Pinia 可以同时支持服务端和客户端。
    // data(){return {}} 防止数据污染（针对服务端，如果只是客户端使用对象也没关系）
    return{
      // 所有这些属性都将自动推断出它们的类型
      age:18,
      name:'zhangsan',
      arr:[1,2,3,4]
    }
  },
  getters:{
      // state =>store中定义的state，推荐箭头函数
      // getAge:(state)=>{
      //   return state.age+10
      // },

      // this ->指向store实例，不能对返回值自动推导
      // getAge():number{
      //   return this.age+10
      // }

      // 访问其他的getters,通过this, 但是不能使用箭头函数！！！，因为箭头函数this指向问题
      getNameAndAge():string{
        return this.getAge(5) + this.name
      },

      // 向getters传递参数,返回函数的形式接收参数
      // 注意：和普通函数一样，没有缓存效果了（原本是类似computed属性有缓存效果）
      // 一般很少使用到
      getAge:(state)=>{
        return (data:number)=> state.age+data
      },

      // 访问其他store中的getters
      getCount(state){
        const countStore = useCounterStore();
        const age = useAgeStore();
        return age.age+countStore.count
      }
    },
  actions:{ // 必须使用普通函数，不能使用箭头函数
    // this指向store仓库
    // 使用this可以对返回值自动推导（不同于getters，getters不能）
    // 既可以处理同步操作，又可以异步操作（vuex只能异步，actions里面通过mutations操作数据）
    addAge(pa:number){
      this.age +=pa
    },

    getuserInfo(){
      const countStore = useCounterStore();
      if(countStore.login()){
        // 调接口
        axios.get('http://127.0.0.1:4523/m1/4756862-0-default/api/auth/captcha').then((res:any)=>{
          console.log(res);
        })
        console.log('调接口')
      }
    }
  },
  //简写
  // persist: true,
  //或者
  // persist:{
  //  enabled:true,
  //}
  persist:{
        key: 'piniaStore2', //存储名称
        storage: sessionStorage, // 存储方式
        paths: ['name', 'age'],//指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state
  }
})

（4）index.ts文件中写代码（setup store，组合式Api）

//setup store
export const useCounterStore = defineStore('counter', () => {
  const count = ref(10)
  const doubleCount = computed(() => count.value * 2)

  let reacName = reactive({})
  let reacName2 = reactive([])

  let reactiveName = reactive({
    aa:'reactive响应式数据'
  })
  const reactiveName2 = computed(()=>reactiveName)
  function increment() {
    count.value++
    reactiveName.aa='我是reactive中的值' //这样是响应式
    reacName = {// reactive定义对象直接赋值不行，不是响应式
      name:'zhangsan'
    }
    reacName2 = [// reactive定义数组直接赋值不行，不是响应式
      {
        name:'lisi'
      }
    ]
    // console.log(reactiveName.aa,reactiveName2.value.aa,'99')
    // console.log(reacName,reacName2,'88')
  }
  function login(){
    return true
  }


  return { count, doubleCount, increment,login,reactiveName,reactiveName2,reacName,reacName2}
},{
  //简写
  // persist: true,
  //或者
  // persist:{
  //  enabled:true,
  //}
  persist:{
    key: 'piniaStore', //存储名称
    storage: sessionStorage, // 存储方式
    paths: undefined,//指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state
  }
})