pinia

1. pinia

1.1搭建 pinia 环境

第一步：npm install pinia

第二步：操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const pinia = createPinia()

const app = createApp(App)

app.use(router)
app.use(pinia)
app.mount('#app')

1.2 存储+读取数据

1. Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。

2. 它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。

3. 具体编码：src/store/talk.ts

import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'

// 定义并暴露一个store
export const useTalkStore = defineStore('talk', {
    // 动作
    actions: {
        async getATalk() {
            let result = await axios.get('http://api.uomg.com/api/rand.qinghua?format=json')
            let obj = { id: nanoid(), title: result.data.content }
            this.talkList.unshift(obj)
        }
    },
    // 状态
    state() {
        return {
            talkList: [
                { id: 'yuysada01', content: '你今天有点怪，哪里怪？怪好看的！' },
                { id: 'yuysada02', content: '草莓、蓝莓、蔓越莓，你想我了没？' },
                { id: 'yuysada03', content: '心里给你留了一块地，我的死心塌地' }
            ]
        }
    },
    // 计算
    getters: {}
})

4. 组件中使用state中的数据

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { useTalkStore } from '@/stores/LoveTalk';

const talkStore = useTalkStore()
const talkList  = talkStore.talkList

function getLoveTalk() {
    talkStore.getATalk()
}
</script>

1.3. 修改数据（三种方式）

1. 第一种修改方式，直接修改

countStore.sum = 666

2. 第二种修改方式：批量修改

countStore.$patch({
  sum:999,
  school:'atguigu'
})

3. 第三种修改方式：借助action修改（action中可以编写一些业务逻辑）

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
    actions: {
        //加
        increment(value: number) {
            if (this.sum < 10) {
                this.sum += value
            }
        },
        //减
        decrement(value: number) {
            if (this.sum > 1) {
                this.sum -= value
            }
        }
    },
    state() {
        return {
            sum: 6
        }
    }
})

4. 组件中调用action即可

// 使用countStore
const countStore = useCountStore()

// 调用对应action
countStore.increment(n.value)

1.4. storeToRefs

• 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
• 注意：pinia提供的storeToRefs只会将数据做转换，不操作方法，而Vue的toRefs会转换store中全部数据。

<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>


<script setup lang="ts">
import { useTalkStore } from '@/stores/LoveTalk';
import { storeToRefs } from 'pinia';

const talkStore = useTalkStore()
// 使用storeToRefs进行结构
const { talkList } = storeToRefs(talkStore)

function getLoveTalk() {
    talkStore.getATalk()
}
</script>

1.5. getters

1. 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。

2. 追加getters配置。

import { defineStore } from 'pinia'

// 定义并暴露一个store
export const useCountStore = defineStore('count', {
    // 动作
    actions: {},
    // 状态
    state() {
        return {
            sum: 1,
            school: 'atguigu'
        }
    },
    // 计算
    getters: {
        bigSum: (state): number => state.sum * 10,
        upperSchool(): string {
            return this.school.toUpperCase()
        }
    }
})

3. 组件中读取数据：

const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

1.6. $subscribe

通过 store 的 $subscribe() 方法侦听 state 及其变化

// vue
talkStore.$subscribe((mutate, state) => {
    // 浏览器本地存储，只能传字符串（JSON.stringify将数组字符串转化为JSON字符串）
    localStorage.setItem('talk', JSON.stringify(state.talkList))
})

// ts
state() {
    return {
        // 让JSON字符串反转回去，防止第一次访问出现null.unshift 加 || []
        talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
    }
}

1.7. store组合式写法

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'


export const useTalkStore = defineStore('talk', () => {
    // state
    const talkList = reactive(
        JSON.parse(localStorage.getItem('talkList') as string) || []
    )

    // action
    async function getATalk() {
        let result = await axios.get('http://api.uomg.com/api/rand.qinghua?format=json')
        let obj = { id: nanoid(), title: result.data.content }
        talkList.unshift(obj)
    }

    
    return { talkList,getATalk }
})