vue3如何用pinia替代vuex

npm i pinia --save

import { createPinia } from 'pinia'

const store = createPinia()

export default store

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

const app = createApp(App)

app.use(store)
app.mount('#app')

import { defineStore } from 'pinia'

interface UserInfo {
  name?: string
  age?: number
}

// 第一个参数是id，id必填，且需要保证值唯一
export const useUserStore = defineStore('user', {
  state: (): {
    userInfo: UserInfo
    token: string
  } => {
    return {
      userInfo: {},
      token: ''
    }
  },
  getters: {
    newName: state => state.userInfo.name + '牛'
  },
  actions: {
    updateUserInfo(userInfo: UserInfo) {
      this.userInfo = userInfo
    },
    updateToken(token: string) {
      this.token = token
    }
  }
})

<script setup lang="ts">
import { useUserStore } from '../../store/user'

const userStore = useUserStore()

// 读取state中的数据
const userInfo: ComputedRef<{
  name?: string
  age?: number
}> = computed(() => userStore.userInfo)

// 读取getter中的数据
const newName = userStore.newName
</script>

<script lang="ts" setup>
import { useUserStore } from '../../store/user'

const userStore = useUserStore()

function handleLogin() {
  userStore.updateUserInfo({ name: '李二' })
}
</script>

import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useUser2Store = defineStore('user2', {
  state: (): {
    sex: string
  } => {
    return {
      sex: '0'
    }
  },
  actions: {
    sayInfo(sex: string) {
      this.sex = sex
  
      // 引用其他store
      const userStore = useUserStore()
      console.log(
        `我叫${userStore.newName}, 我是个小${
          this.sex === '0' ? '姑娘' : '伙子'
        }`
      )
    }
  }
})

<script lang="ts" setup>
import { useUser2Store } from '../../store/user2'

const user2Store = useUser2Store()

setTimeout(() => {
  user2Store.sayInfo('1')
}, 3000) // 3s后输出----》 我叫李二牛, 我是个小伙子
</script>

npm i pinia-plugin-persist --save

import { createPinia } from 'pinia'
import piniaPluginpersist from 'pinia-plugin-persist'

const store = createPinia()

// 使用持久化插件
store.use(piniaPluginpersist)

export default store

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: (): {
    userInfo: UserInfo
    token: string
  } => ({
    userInfo: {},
    token: ''
  }),
  getters: { ... },
  actions: { ... },
    
  // 开始数据持久化
  persist: {
    enabled: true
  }
})

persist: {
    enabled: true,
    strategies: [{
      key: '_user',
      storage: localStorage
    }]
  }

  persist: {
    enabled: true,
    strategies: [{
      key: '_user',
      storage: localStorage,
      paths: ['userInfo']
    }]
  }