VUE3-Pinia

优势

• dev-tools 支持

  • 跟踪动作、突变的时间线
  • Store 出现在使用它们的组件中
  • time travel 和 更容易的调试

• 热模块更换

  • 在不重新加载页面的情况下修改您的 Store
  • 在开发时保持任何现有状态

• 插件：使用插件扩展 Pinia 功能

• 为 JS 用户提供适当的 TypeScript 支持或 autocompletion

• 服务器端渲染支持

与 vuex 3.x/4.x 对比

• mutations 不再存在
• 自动注入、导入函数、调用函数
• 支持ts，且内容都是类型化
• 无需动态添加 Store，默认情况下它们都是动态的
• 没有命名空间模块。
• 没有module的嵌套结构

Store

• Store是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递

定义一个Store

import { defineStore } from 'pinia'

export const useStore = defineStore('main',{
  state: () => { //使用完整类型推断的箭头函数
    return {
      // 定义的属性会自动推断类型
      count: 0
    }
  },
  getters: {
    increment: () => {},
    doublePlusOne(): number { // 通过 this 访问,返回类型必须明确设置
      return this.counter * 2 + 1
    },
  },
  actions: {
    increment: () => {},
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // 让表单组件显示错误
        return error
      }
    },
  }
})

//页面
export default defineComponent({
  setup() {
    const store = useStore()
    
    const { name, doubleCount } = store   // ❌ 不能解构，会破坏响应式
    const { name, doubleCount } = storeToRefs(store) // 可以解构，但跳过任何 action 或 非响应式（不是 ref/reactive）的属性
    store.count++ // 直接读取和写入 state
    store.$reset() // 重置state到初始值
    store.increment()
    return {
      // 这将是响应式的
      doubleValue: computed(() => store.doubleCount),
      }
  },
})

在 Options API 中使用 setup()

import { defineStore } from 'pinia',

const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0
  })
})

// 页面
import { useCounterStore } from '../stores/counterStore'

export default {
  setup() {
    const counterStore = useCounterStore()
    return { counterStore }
  },
  computed: {   // getter
    tripleCounter() {
      return counterStore.counter * 3
    },
  },
  methods: {  // action
    incrementAndPrint() {
      counterStore.increment()
      console.log('New Count:', counterStore.count)
    },
  }
}

在 Options API 中不使用 setup()

• 使用 mapState() 映射为只读计算属性
• 使用 mapWritableState() 可以写入
• 示例：

  import { mapState } from 'pinia'
  import { useCounterStore } from '../stores/counterStore'
  
  export default {
    computed: {
    💠 使用 mapState() 映射为只读计算属性
      // 允许访问组件内部的 this.counter
      // 与从 store.counter 读取相同
      ...mapState(useCounterStore, {
        myOwnName: 'counter',
        double: store => store.counter * 2,// 还可以编写一个访问 store 的函数
        magicValue(store) { // 可以读取“this”，但无法写入...
          return store.someGetter + this.counter + this.double
        },
      }),
    💠 使用 mapWritableState() 可以写入
      ...mapWritableState(useCounterStore, ['counter']),// 与从 store.counter 读取相同
      ...mapWritableState(useCounterStore, {// 与上面相同，但将其注册为 this.myOwnName
        myOwnName: 'counter',
      }),
  
      //对于像数组这样的集合，不需要mapWritableState()，除非用cartItems = []替换整个数组
    },
    methods:{
      ...mapActions(useCounterStore, { myOwnName: 'doubleCounter' }),
    }
  }

修改 store – 更改都出现在 devtool

• 1、直接用 store.counter++
• 2、调用 $patch 使用部分“state”对象同时应用多个更改

  cartStore.$patch((state) => {
    state.items.push({name: 'shoes', quantity: 1})
    state.hasChanged = true
  })

替换state — $state 替换整个state

• store.$state = { counter: 666, name: ‘Paimon’ }

订阅状态 — $subscribe(): 只会在 patches 之后触发一次

将参数传递给getter — 此操作 getter 不再缓存

//store
export const useState = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    }
  }
})

//页面
export default {
  setup() {
    const store = useStore()
    return { getUserById: store.getUserById }
  }
}

<template>
  <p>user 2: {{getUserById(2)}}</p>
</template>

访问其他store的getter/action

import { useOtherStore } from './other-store'

export const useStore = defineStore('main', {
  state: () => ({}),
  getters: {
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
    },
  },
  actions: {
    async fetchUserPreferences(preferences) {
      const auth = useAuthStore()
      if (auth.isAuthenticated) {
        this.preferences = await fetchPreferences()
      } else {
        throw new Error('User must be authenticated')
      }
    },
  },
})

订阅Actions — store.$onAction()

const unsubscribe = someStore.$onAction(
  ({
    name, // action 的名字
    store, // store 实例
    args, // 调用这个 action 的参数
    after, // 在这个 action 执行完毕之后，执行这个函数
    onError, // 在这个 action 抛出异常的时候，执行这个函数
  }) => {
    // 记录开始的时间变量
    const startTime = Date.now()
    // 如果 action 成功并且完全运行后，after 将触发。
    // 它将等待任何返回的 promise
    after((result) => {})

    // 如果 action 抛出或返回 Promise.reject ，onError 将触发
    onError((error) => {})
  }
)

// 手动移除订阅
unsubscribe()

// 页面
export default {
  setup() {
    const someStore = useSomeStore()
    //第二个参数true ，此订阅将在组件卸载后保留
    someStore.$onAction(callback,true)
  }
}

插件

Pinia 插件是一个函数，可以选择返回要添加到 store 的属性。

创建Pinia

import { createPinia } from 'pinia'

function SecretPiniaPlugin() {    // 插件
  return { secret: 'the cake is a lie' }
}

const pinia = createPinia()
pinia.use(SecretPiniaPlugin)  //将插件添加到pinia实例

// 页面
const store = useStore()
store.secret

页面使用

export function myPiniaPlugin(context) {
  context.pinia // 使用 `createPinia()` 创建的 pinia
  context.app // 使用 `createApp()` 创建的当前应用程序（仅限 Vue 3）
  context.store // 插件正在扩充的 store
  context.options // 定义存储的选项对象传递给`defineStore()`
  // ...
}

扩充store

• 1、简单的在插件中返回它们的对象来为每个store添加属性

  pinia.use(() => ({hello:'world'}))

• 2、直接在store上设置属性

  pinia.use(({ store }) => {
    store.hello = 'world'
  })

• 3、每个store都是用reactive包装，自动展开任何Ref(ref(),computed(,…))

  const shareRef = ref('shared')
  pinia.use(({store}) => {
    store.hello = ref('secret')
    store.hello // secret
  
    // 所有store都共享 shared属性
    store.shared = sharedRef
    store.shared // shared
  })

添加新状态

• 添加位置：
  • 在store上，可以使用store.myState访问
  • 在store.$state上，在SSR期间被序列化
• 共享ref或computed属性

  const globalSecret = ref('secret')
  pinia.use(({store}) => {
    // secret在所有state之间共享
    store.$state.secret = globalSecret
    store.secret = globalSecret
    store.router = markRaw(router) // 添加外部插件
    store.$subscribe(()=>{})  // 在存储变化的时候执行
    store.$onAction(()=>{}) // 在 action 的时候执行
  
    store.secret
  })

• 注意：插件中发生的状态更改或添加（包括调用store.$patch()）发生在存储处于活动状态之前，因此不会触发任何订阅。

在组件外使用存储

单页应用程序

• 没有进行任何 SSR（服务器端渲染），则在使用 app.use(pinia) 安装 pinia 插件后，任何useStore() 调用都将起作用：

服务端渲染应用

• 必须将 pinia 实例传递给 useStore()

服务端渲染

vue and vite

• 1.只要在 setup 函数、getters 和 actions 的顶部调用 useStore() 函数，使用 Pinia 创建store可以立即用于 SSR

  export default defineComponent({
    setup() {
      const main = useMainStore()
      return { main }
    },
  })

• 2.在setup()之外使用存储：则需要将 pinia 实例传递给 useStore() 函数调用

  const pinia = createPinia()
  const app = createApp(App)
  
  app.use(router)
  app.use(pinia)
  
  router.beforeEach((to) => {
    const main = useMainStore(pinia)
    if (to.meta.requiresAuth && !main.isLoggedIn) return '/login'
  })

• 3.Pinia 可以将自身作为 $pinia 添加到应用程序中，以便可以在serverPrefetch() 之类的函数中使用它：

  export default {
    serverPrefetch() {
      const store = useStore(this.$pinia)
    },
  }

• 4.State hydration
  • 为了 hydration 初始状态，需要确保 rootState 包含在 HTML 中的某个位置，以便 Pinia 稍后获取它。出于安全原因，应该转义状态。可以使用 JSON.stringify()/JSON.parse() 序列化和解析你的状态