Pinia.js 有如下特点：

Pinia.js 是新一代的状态管理器，由 Vue.js 团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。Pinia 文档

Vuex 当前最新版是 4.x
1. Vuex4 用于 Vue3
2. Vuex3 用于 Vue2
Pinia 当前最新版是 2.x
1. 即支持 Vue2 也支持 Vue3

完整的 typescript 的支持
足够轻量，压缩后的体积只有 1.6kb
去除 mutations，只有 state，getters，actions(支持同步和异步)
没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割
无需手动添加 store，store 一旦创建便会自动添加

安装

npm install pinia --save

创建 Store

// src/store/index.ts
import { createPinia } from 'pinia'

const store = createPinia()

export default store

// src/main.ts

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

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

State 状态

创建 state(类似于组件的 data，用来存储全局状态的)

// src/store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'name', // id必填，且需要唯一。将来 Pinia 会把所有的容器挂载到根容器
  state: () => {
    return {
      name: 'tmc',
    }
  },
})

注意：

1. 必须是函数（这样是为了在服务端渲染避免交叉请求导致的数据状态的污染，不是服务端渲染可以不是函数）

2. 必须是箭头函数（为了更好的 TS 类型推导）

获取 state

<template>
  <div>{{ userStore.name }}</div>
</template>

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

const userStore = useUserStore()
</script>

// 注意：也可以结合 computed 获取
const name = computed(() => userStore.name)

// 注意：state 也可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的 storeToRefs
import { storeToRefs } from 'pinia'
const { name } = storeToRefs(userStore)

修改 state

// 直接修改，不建议
userStore.name = 'sfm'
// 建议去action里修改state,此时可以获取到this
export const useUserStore = defineStore({
  id: 'name',
  state: () => {
    return {
      name: 'tmc',
    }
  },
  actions: {
    updateName(name) {
      this.name = name
    },
  },
})

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

const userStore = useUserStore()
userStore.updateName('sfm')
</script>

注意：函数接受一个可选参数：state 状态对象。如果使用 this，需手动填写返回值的类型,否则类型推导不出来

Getter

创建 getter(类似于组件的 computed，用来封装计算属性，有缓存功能)

export const useUserStore = defineStore({
  id: 'name',
  state: () => {
    return {
      name: 'tmc',
    }
  },
  getters: {
    fullName: (state) => {
      return state.name + 'sfm'
    },
  },
})

userStore.fullName // tmcsfm

Action

action(同步 & 异步)

export const useUserStore = defineStore({
  id: 'name',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      return data
    },
  },
})

action 间相互调用(直接用 this 访问即可)

export const useUserStore = defineStore({
  id: 'name',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      this.setData(data) // 调用另一个 action 的方法
      return data
    },
    setData(data) {
      console.log(data)
    },
  },
})

数据持久化

插件 pinia-plugin-persist 可以辅助实现数据持久化功能

npm i pinia-plugin-persist --save

// src/store/index.ts

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

const store = createPinia()
store.use(piniaPluginPersist)

export default store

// 在对应的 store 里开启 persist 即可
export const useUserStore = defineStore({
  id: 'name',

  state: () => {
    return {
      name: 'tmc',
    }
  },

  // 开启数据缓存
  persist: {
    enabled: true,
  },
})

注意：数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key

自定义 key

可以在 strategies 里自定义 key 值，并将存放位置由 sessionStorage 改为 localStorage

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

持久化部分 state

默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化

state: () => {
  return {
    name: 'tmc',
    age: 18,
    sex: '男'
  }
},

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}

# Pinia.js 有如下特点：

# 安装

# 创建 Store

# State 状态

# Getter

# Action