前端-vue工程化-Pinia的使用

先来看一下我们的文件夹吧：

大多数vue3前端项目中都会有这样一个文件夹是用来存放全局变量的地方，用来做状态管理。

我们项目中使用的状态管理工具其实就是Pinia，当然不是我推荐大家用的，这个有迹可循，因为Pinia是在Vue官网上被推荐的一种方式。下面截几张官网上的图片：

然后给大家推荐两篇我看到的比较不错的博文：

【vue3】基础知识点-pinia_vue3 definestore-CSDN博客文章浏览阅读1k次。vue3基础知识点-pinia_vue3 definestorehttps://blog.csdn.net/weixin_49668076/article/details/132182309https://www.cnblogs.com/zuoyang/p/17831607.htmlhttps://www.cnblogs.com/zuoyang/p/17831607.html我就是看了他们的文章，并且项目中确实用到了状态管理，所以顺便练习了一下，感觉他们写的已经很不错了，让我加深了印象和更好的理解了Pinia这个状态管理库。（其实我也不用再写了，看完这两篇文章，再去官网扫一眼，如果项目中真的需要，试用一下基本就可以成功。这里我还是把基本用法补充一下，主要是怕哪天文章被删掉了有风险，虽然概率不大。不过我的做法更多的也就是复制粘贴吧。看完试验一下，很快也就理解了。）

我们定义store的时候也有两种方式：选项式（Option Store）和组合式（Setup Store）

（1）选项式（Option Store）

（2） 组合式（Setup Store）

export const useCounterStore = defineStore('counter', () => {
  //响应式变量
  const count = ref(0)

  //这个相当于getters，也是响应式的
  const doubleCount = computed(() => count.value * 2)
   
   //定义函数
  function increment() {
    count.value++
  }

  return { 
    count, 
    doubleCount,
    increment
  }
})

其实组合式更贴近Vue3的写法。这里重点讲。

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

最后在具体的页面中使用它即可：

唯一需要注意的就是store中的响应式数据是不能被结构的！除非使用storeToRefs

<script setup>
import { storeToRefs } from 'pinia'

const store = useCounterStore()

// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
//错误写法：const { name, doubleCount } = store

const { name, doubleCount } = storeToRefs(store)

// 作为 action 的 increment方法 是可以直接解构
const { increment } = store


</script>

（自己对着官网抄写了一遍，才发现他们也有很多是抄过来的，好吧，我们都一样。）

这个也是官网的原话：

所以如果不是历史项目需要，可以直接上 Pinia 就行！

补充一句：项目中全局的状态管理并非是必要的，这一点官网说的也很客观，当我们业务有需要的时候，考虑的全局状态管理的确实有必要的时候，Pinia当然就是一个很不错的方式。