Pinia 的使用

大家好,我是大帅子,今天给大家讲一下 Pinia

---

Pinia 主要就是 跟 vuex对标的

与 Vuex 3.x/4.x 的比较

Vuex 3.x 是 Vuex 的 Vue 2 而 Vuex 4.x 是 Vue 3

Pinia API 与 Vuex ≤4 有很大不同，即：

• mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。
• 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
• 不再需要注入、导入函数、调用函数、享受自动完成功能！
• 无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。
• 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。
• 没有 命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。

主要的成员(三个)

state : 里面还是一样,存储数据的

getters : 计算属性

actions : 里面同步异步都可以就是修改state里面的数据的

导入项目中使用

1. 下载

yarn add  pinia

2. main.js

import { createPinia } from 'pinia'
const pinia = createPinia()


createApp(App).use(pinia).mount('#app')

3. 新建store/模块页面.js

import { defineStore } from 'pinia'

const useCounterStore(模块名) = defineStore('counter', {
  state: () => {
    return {
      count: 100
    }
  },
  actions: {
    increment() {
      console.log(this)
      this.count *= 2
    }
  },
  getters: {}
})

export default useCounterStore

4. 组件使用

import useCounterStore from './store/counter'

const counter = useCounterStore()


我们如果要pinia里面的属性或者方法的话
直接


counter.count

counter.increment   


都是可以直接使用的

模块化

新建一个 store/index.js ,然后按照如下的操作

1. store/index.js

import useUserStore from './user'
import useCounterStore from './counter'

export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore()
  }
}

2. 组件里面使用

import useStore from './store'
// 这里我们可以给每个模块结构出来
const {user,counter} = useStore()
// 1. 如果我们还想在解构一层的话
// 2. 但是我们发现此时解构的数据不是响应式的,我们就需要用 storeToRefs()
import { storeToRefs } from 'pinia'

const { count,increment } = storeToRefs(counter)

// 3. getters 里面的数据也可以解构,
// 4. 但是我们  actions  里面的数据不能解构 !!!!!! 

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!