【Vue3】Pinia的基础语法

1. 定义store
2. 组件使用store

一、查询官网

首先导入defineStore包，并且在里面

第一个参数需要声明仓库的唯一标识，这是因为在Pinia中，每个仓库模块都是独立的，并且所有仓库最终都会挂到同一个状态树上面，这个跟之前学的state是蛮像的。

第二个参数就可以去配置一些小的配置项，风格可以是组合式API也可以是选项式API

• 如果是选项式API，就传对象，往里面去配选项

  在state里提供数据，给一个箭头函数，然后把箭头函数的返回值返回的对象作为我们的数据，下面就相当于维护了数据count。

  getters和Vuex一模一样。

  不一样的地方在于，没有mutations了，可以直接在actions里修改数据，所提供的方法全部在actions里面提供，并且操作数据是通过this来操作的，this就是当前的state。

  

• 但Options Store并不是我们后面常用的，我们常用的是跟我们平时编码统一的Composition API写法

  

  与 Vue 组合式 API 的 setup 函数 相似，在第二个参数中可以直接传入箭头函数，然后在这个setup函数里就可以使用ref定义数据、方法。

  一旦定义完后，就将数据、方法进行return（暴露出去），暴露出去之后，将来页面就可以使用了。

  并且在 Setup Store 中：

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

---

二、定义store

创建scr/store文件夹

在store中可以创建任意数目的子仓库，并且每一个store是独立的

store/counter.js

直接输入ref，然后回车，此时它会自动导入

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 定义store
// defineStore(仓库的唯一标识, () => { ... })
// 仓库的唯一标识不要乱写，写仓库名即可
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾，中间就是我们的仓库名。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 定义完仓库之后，返回的是一个函数，这个函数一旦调用，就可以拿到return后面暴露出来的数据，用变量接收这个对象，对象里面就有想要的数据和方法
export const useCounterStore = defineStore('counter', () => {
  // 声明数据 state - count
  const count = ref(100)
  
  // 声明数据 state - msg
  const msg = ref('hello pinia')
  return {
    count,
    msg
  }
})

---

三、组件使用store

然后在App.vue中调用

这里要注意的是，不要对conterStore去做解构，因为会丢失数据的响应式

<script setup>
import Son1Com from '@/components/Son1Com.vue'
import Son2Com from '@/components/Son2Com.vue'
import { userCounterStore } from '@/store/counter.js'
const counterStore = userCounterStore()
console.log(counterStore);
</script>

<template>
  <div>
    <!-- 模板中需要访问数据的时候直接访问即可 -->
    <h3>App.vue根组件
         - {{ counterStore.count }}
         - {{ counterStore.msg }}
    </h3>
    <Son1Com></Son1Com>
    <Son2Com></Son2Com>
  </div>
</template>

<style scoped>
</style>

如果要在Son1中调用也是同理

<script setup>
import { userCounterStore } from '@/store/counter'
const counterStore = userCounterStore()
</script>

<template>
  <div>
    我是Son1.vue - {{ counterStore.count }}
    <button>+</button>
  </div>
</template>

<style scoped>

</style>

如果要在Son2中调用也是同理

<script setup>
import { userCounterStore } from '@/store/counter'
const counterStore = userCounterStore()
</script>

<template>
  <div>
    我是Son2.vue - {{ counterStore.count }}
    <button>-</button>
  </div>
</template>

<style scoped>

</style>

点加减修改数据

页面当中是不能直接修改数据的，我们应该要定义对应的方法，谁的数据谁来维护

store/counter.js

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 定义store
export const useCounterStore = defineStore('counter', () => {
  // 声明操作数据的方法 action (普通函数和异步请求的都是在action里面)
  const addCount = () => count.value++
  const subCount = () => count.value--
  return {
    addCount,
    subCount
  }
})

---

四、getters实现

Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去

store/counter.js

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 定义store
export const useCounterStore = defineStore('counter', () => {
    // 声明数据 state - count
    const count = ref(100)
    // 声明基于数据派生的计算属性 getters (computed)
    const double = computed(() => count.value * 2)
    return {
        count,
        double
    }
})

Son1Com.vue

<script setup>
import { userCounterStore } from '@/store/counter'
const counterStore = userCounterStore()
</script>

<template>
  <div>
    我是Son1.vue - {{ counterStore.count }} - {{ counterStore.double }}
    <button @click="counterStore.addCount">+</button>
  </div>
</template>

<style scoped>

</style>

---

五、action异步实现

方式：异步action函数的写法和组件中获取异步数据的写法完全一致

• 接口地址：http://geek.itheima.net/v1_0/channels

• 请求方式：get

• 请求参数：无

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中

步骤：

1. 安装axios

2. 重启服务

3. 编写函数

   store/channel.js

   import { defineStore } from 'pinia'
   import { ref } from 'vue'
   import axios from 'axios'
   
   export const useChannelStore = defineStore('channel', () => {
     // 声明数据
     const channelList = ref([])
   
     // 声明操作数据的方法
     const getList = async () => {
       // 支持异步
       const { data: { data }} = await axios.get('http://geek.itheima.net/v1_0/channels')
       channelList.value = data.channels
     }
   
     // 声明getters相关
     return {
       channelList,
       getList
     }
   })
   

   App.vue

   <script setup>
   import { useChannelStore } from './store/channel'
   const channelStore = useChannelStore()
   
   // 此时，直接解构，不处理，数据会丢失响应式
   const { getList } = channelStore
   </script>
   
   <template>
     <div>
       <button @click="getList">获取频道数据</button>
       <ul>
         <li v-for="item in channelList" :key="item.id">{{ item.name }}</li>
       </ul>
     </div>
   </template>
   
   <style scoped>
   
   </style>