搭建pinia环境及存储读取数据.

搭建pinia环境

我们想要使用pinia，我们首先需要安装它

之后我们就三步，引入、创建、安装
- 引入、创建、安装pinia
vue 复制代码
```
//引入createApp创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
//1.引入pinia
import { createPinia } from 'pinia'
//2.创建pinia实例
const pinia = createPinia()



const app = createApp(App)
//3.将pinia实例挂载到应用实例上
app.use(pinia)
app.mount('#app')
```
1. pinia需要一个统一管理的文件夹，名称叫store
- 这个文件夹的作用如下
  - 状态集中管理，可以将各个组件的状态统一在这里管理起来
  - 逻辑复用，多个组件可以调用同一个人store的方法
  - 模块化设计，可以将不同的功能划分不同的store
我们在上面创建了store文件夹，并对我们之前求和的逻辑创建了一个store的方法来存储数据

js 复制代码

import { defineStore } from 'pinia'
export const useCountStore = defineStore('count', {
    //存储数据的地方
    state: () => ({
        sum: 6
    })
})

数据既然已经存储好了，那么现在我们就需要从组件中去获取数据了

js 复制代码

import { ref } from 'vue';
import { useCountStore } from '../store/sum';
const countStore = useCountStore();
     <h2>当前求和为：{{ countStore.sum }}</h2>

这样我们就可以读取到存储的数据了

求和的弄好了，那生成诗句的组件也是一样的了

js 复制代码

import { defineStore } from 'pinia'

export const useCountStore = defineStore('poem', {
    state: () => (
        [
            { id: 'poem0001', content: '鹅鹅鹅' },
            { id: 'poem0002', content: '曲项向天歌' },
            { id: 'poem0003', content: '白毛浮绿水' },
            { id: 'poem0004', content: '红掌拨清波' }
        ]
    )
})

之后我们就可以在组件中使用了

vue 复制代码

import { defineStore } from 'pinia'

export const usePoemStore = defineStore('poem', {
    // 存储数据的地方 - 箭头函数形式
    state: () => ({
        poemList: [
            { id: 'poem0001', content: '鹅鹅鹅' },
            { id: 'poem0002', content: '曲项向天歌' },
            { id: 'poem0003', content: '白毛浮绿水' },
            { id: 'poem0004', content: '红掌拨清波' }
        ]
    })
})

vue 复制代码

 <ul>
            <li v-for="poem in poemStore.poemList" :key="poem.id">{{ poem.content }}</li>
        </ul>

这样我们就完成了在pinia中存储和读取诗句的方法，后面我们将一起学习关于如何去修改数据的知识方法