pinia学习

一. 什么是pinia

1. pinia是一个vue的存储库，它能够跨组件/页面实现数据的共享。
2. 全局共享状态：export const state = reactive({})，但是这种方法会将您的应用程序暴露在安全漏洞之中。
3. 没有过多的概念和API，主体简洁，易上手。

二. 为什么使用pinia

1. 支持vue-devtools：vue数据状态的一种可视化调试工具
2. 支持热模块的替换
   • 当开发的时候保持所有存在的状态
   • 再不要求重新加载页面条件下修改你的stores
3. 支持各种插件
4. 提供更好的ts支持和ts自动完成功能
5. 支持服务端渲染

三. pinia和vuex的对比

1. vuex的优点：
   • 集中式管理数据之间的通信，便于开发和后期维护。
   • 存储状态是响应式的，当从store读取数据的时候，如果数据发生了变化，能够触发响应式的渲染页面更新。
   • js原生的数据对象写法，比起localStorage不需要做转换，使用方便。
   • 限定了一种可预测的方式改变数据，避免大项目中数据的污染
2. vuex的缺点：刷新浏览器，vuex中的state会重新变为初始状态，解决方案-插件 vuex-persistedstate
3. pinia的优点：
   • 极其轻巧，没有复杂的api，易上手
   • 完整的ts支持
   • 支持 Vue DevTools
   • 支持服务端渲染
   • 没有mutations，actions中既可以处理同步，也可以处理异步
   • 不再有 modules 的嵌套结构，不再需要注入、导入函数、调用函数。
   • 适用于中小型项目

四. pinia的使用

// 创建一个store
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
// 常规写法
export const useUserInfoStore = defineStore('counter',{
  state:()=>{
    return {
      age:25,
      name:'wangjiajia'
    }
  },
  getters:{
    doubleCount: state => state.age * 2,
    addCount: state => {
      return number => state.age + number
    }
  },
  // actions部分
  actions:{
    increment(){
      this.age ++
    }
  }
})

// 一种高级写法：使用函数来定义store
export const useUserInfoStore = defineStore('counter', () => {
  // state部分
  const name = ref('wangjiajia')
  const age = ref(25)

  // getters部分
  const doubleCount = computed(() => age.value * 2)
  const addCount = computed(()=>{
    return number => age.value + number
  })

  // actions部分
  function increment() {
    age.value++
  }

  return { name,age, doubleCount, increment,addCount }
})

使用pinia

<template>
  <div class="header">
    <button @click="clickIncrement">点击我</button>
    <div class="content">{{ name }} -- {{ age }} -- {{ doubleCount }} -- {{ addCount(2) }}</div>
  </div>
</template>

<script setup lang='ts'>
import {useUserInfoStore} from '../stores/counter'
import { storeToRefs } from 'pinia'
const userInfoStore = useUserInfoStore()

// 通过storeToRefs才能使结构出来的值具有响应式
const { name, age ,doubleCount, addCount} = storeToRefs(userInfoStore)

function clickIncrement(){  // 这里使用箭头函数也可以
  userInfoStore.increment()
}
</script>

<style lang='less' scoped>

</style>

五. 总结

1. 在vue3中建议使用Composition Api 即组合式Api。
2. store的写法建议采用函数的方法。
3. vue语法中建议采用setup语法糖形式。