pinia在vue中的使用

pinia官网
一：npm下载

npm install pinia

二：按需使用
pinia在vue2和vue3中都可以使用，vue3中的主要使用如下
在main.js中创建pinia实例：

import './assets/main.css'

import { createApp } from 'vue'

import { createPinia } from 'pinia'

import App from './App.vue'

const app = createApp(App)  //创建根实例

const pinia = createPinia()  //创建pinia实例

app.use(pinia)  //pinia的插件安装配置

app.mount('#app')  //视图的挂载

三：创建文件夹并且在所需页面引入

import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
    const message = 'hellow pinia'
    return { message }
  })

引入

<script setup>
import {useCounterStore} from '@/store/counter'
//useCounterStore  是一个函数
const useCount = useCounterStore()
//useCount 是一个对象
</script>
<template>
  <div>
    <span>{{ useCount.message }}</span>
  </div>
</template>

四：同步处理数据
1：在 counter 文件中：

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

export const useCounterStore = defineStore('counter', () => {
  
    //声明数据
    const message = ref('hellow pinia')
    const count  = ref(100)

    //声明操作数据的方法  action
    const addCount  = ()=>{
      count.value++
    }
    const doubleValue = computed(() => count.value*2)
    const asubCount  = ()=>{
      count.value--
    }

    return { message,count,addCount,asubCount,doubleValue}
  })

2：在根组件中：

<script setup>//语法糖写法
import son1Com from '@/components/son1Com.vue'
import son2Com from './components/son2Com.vue'
</script>
<template>
  <div>
    <son1Com></son1Com>
    <son2Com></son2Com>
  </div>
</template>

3：在组件1中：

<script setup>
import {useCounterStore} from '@/store/counter'
import { storeToRefs } from 'pinia';
const useCount = useCounterStore()
//此时直接解构不处理数据会丢失响应式
const {count,message} = storeToRefs(useCount)
</script>
<template>
  <div>
    <span>{{ message }}</span>
    <p>{{ count }}</p>
    <button @click="useCount.addCount">点我++</button>
  </div>
</template>

4：在组件2中

<script setup>
import {useCounterStore} from '@/store/counter'
const useCount = useCounterStore()
</script>
<template>
  <div>
    我是son2组件
    <p>{{ useCount.count }}---{{ useCount.doubleValue }}</p>
    <button @click="useCount.asubCount">点我--</button>
  </div>
</template>

5：效果如下：

Vite App - Google前端展示图

为了从store中提取属性时保持其响应性，需要使用storeToRefs()。它将为每一个响应式属性创建引用。当只使用store的状态而不调用任何action时，它会非常有用。

五：异步处理数据
1：在 counter 文件中：

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('https://geek.itheima.net/v1_0/channels')
    channelList.value = data.channels
  }
  return {channelList,getList}
})

2：在所需页面中调用

<script setup>
import {useChannelStore} from '@/store/counter'

const channelStore = useChannelStore()
</script>
<template>
  <div>
    <button @click="channelStore.getList">获取数据</button>
    <ul>
      <li v-for="item in channelStore.channelList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

3：效果如下：

页面效果图

4：pinia持久化
1：插件安装：

npm i pinia-plugin-persistedstate

2：在main.js中引入
注意安装版本（pinia>=2.0.0）才能使用插件，下面是我的引入：

import './assets/main.css'

import { createApp } from 'vue'

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'

const app = createApp(App)

const pinia = createPinia()

app.use(pinia.use(piniaPluginPersistedstate))

app.mount('#app')

3：在 counter 文件中

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('https://geek.itheima.net/v1_0/channels')
    channelList.value = data.channels
  }
  return {channelList,getList}
})
export const useCounterStore = defineStore('counter', () => {
    //声明数据
    const message = ref('hellow pinia')
    const count  = ref(100)
    //声明操作数据的方法 action
    const addCount  = ()=>{
      count.value++
    }
    const asubCount  = ()=>{
      count.value--
    }
    return { message,count,addCount,asubCount}
  },
  {
    persist: true,//开启当前模块的持久化
  },
)

4：此外在persist中还可以进行如下操作，详细请移步官网

  {
    // persist: true,//开启当前模块的持久化
    persist:{
      key:'testData_GH',//store.$id 作为storage默认的key
      paths:['count']//由于默认是对整个数据进行持久化所以这里我们可以指定某些持久化的数据
    }
  },

六：总结
1：Pinia作为新一代的状态管理工具可以替代vuex
2：Pinia已经不需要mutation,其中的action支持同步也支持异步
3：Pinia使用computed计算属性函数
4：Pinia产生的Store使用storeToRefs保持响应式
5：Pinia的数据持久化可以使用插件pinia-plugin-persistedstate来实现