目录
- pinia
- 搭建pinia环境
- 存储、读取数据
- 修改数据（三种方式）
pinia
搭建pinia环境
一、第一步：npm install pinia
二、第二步：操作src/main.ts
import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia，用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')
存储、读取数据
一、Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它，它有三个概念：state、getter、action，相当于组件中的： data、 computed 和 methods。具体编码：src/store/count.ts
// 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}})
具体编码：src/store/talk.ts
// 引入defineStore用于创建storeimport {defineStore} from 'pinia'// 定义并暴露一个storeexport const useTalkStore = defineStore('talk',{// 动作actions:{},// 状态state(){return {talkList:[{id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},{id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},{id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}]}},// 计算getters:{}})
二、组件中使用state中的数据
<template><div class="count"><h2>当前求和为：{{ countStore.sum }}</h2><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="minus">减</button></div>
</template><script setup lang="ts" name="Count">import { ref,reactive } from "vue";// 引入对应的useXxxxxStoreimport {useCountStore} from '@/store/count'// 调用useXxxxxStore得到对应的storeconst countStore = useCountStore()// 以下两种方式都可以拿到state中的数据console.log('@@@',countStore.sum)// console.log('@@@',countStore.$state.sum)/*
let obj = reactive({a:1,b:2,c:ref(3)})let x = ref(9)console.log(obj.a)console.log(obj.b)console.log(obj.c)// c是由reactive包裹的ref，在获取c的值时，不用.value，直接obj.c即可
*/// 数据let n = ref(1) // 用户选择的数字// 方法function add(){}function minus(){}
</script>
<template><div class="talk"><button @click="getLoveTalk">获取一句土味情话</button><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{talk.title}}</li></ul></div>
</template><script setup lang="ts" name="LoveTalk">import {reactive} from 'vue'import axios from "axios";import {nanoid} from 'nanoid'import {useTalkStore} from '@/store/loveTalk'const talkStore = useTalkStore()// 方法async function getLoveTalk(){// 发请求，下面这行的写法是：连续解构赋值+重命名// 从请求中解构出data，从data中解构出content并将其命名为title// let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串，包装成一个对象// let obj = {id:nanoid(),title}// 放到数组中// talkList.unshift(obj)}
</script>
