Vue基础-05

本节：

一、pinia的安装。安装 | Pinia 中文文档

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

pinia可以记录全局的一个状态，比如是否登录等等。。

（1）在终端下载pinia

npm install pinia

顺便安装歌sass，这个其实就是更高级的css,让浏览器更好的读懂。 

npm install sass 

（2）在main.js 

1.引入pinia 

import { createPinia } from 'pinia'
 

2.注册使用pinia

app.use(createPinia());

二、定义store

一个 Store （如 Pinia）是一个实体，它持有未绑定到您的组件树的状态和业务逻辑。换句话说，它托管全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。它有三个概念，state、getters 和 actions 并且可以安全地假设这些概念等同于组件中的“数据”、“计算”和“方法”。

store说白了就是存储信息的文件。

（1）创建一个store,创建一个文件夹，自定一个js文件

//1.引入pinia
import { defineStore, storeToRefs } from 'pinia'
 
//2.写一个类似data的格式，存储数据
export const oneStore = defineStore("one", {
    //one这个全局只能唯一，不能重复，oneStore是引用时候的名字
    state: () => {
        return {//这里类似data，存储变量
            count: 0,
            content: "总有人会爱你"
        }
 
    },
    actions: {//这里类似methods，用来放方法的
 
    },
    getters: {//这里是类似conputed，计算属性
 
    }
 
})

（2）简单的使用store

1.引入store   2.实例化store里面的内容，就可以使用啦

<template>
    <div>
        page1
        <div>1</div>
        {{ counter.content }}
        <!-- 渲染变量 -->
    </div>
</template>
 
<script setup>
//1、引入store
import { defineStore, storeToRefs } from 'pinia'
import { oneStore } from '../store/testStore'
 
//2、注册store，实例化store
const counter = oneStore()
//不知道counter是什么，可以输出，输出发现就是state里面的内容，是一个数组
 
 
</script>
 
<style scoped>
</style>

使用和修改store里面的值和方法。

<template>
    <div>
        page1
        <div>1</div>
        {{ counter }}
        <!-- 渲染变量 -->
        <div @click="oneClick">点击改变store数据</div>
    </div>
</template>
 
<script setup>
//1、引入store
import { defineStore, storeToRefs } from 'pinia'
import { oneStore } from '../store/testStore'
 
//2、注册store，实例化store
const counter = oneStore()
//不知道counter是什么，可以输出，输出发现就是state里面的内容，是一个数组
 
//3.修改store里的变量(因为是vue3所以要用ref的形式拿到变量)
let { count1 } = storeToRefs(counter);
 
function oneClick() {
    counter.testAction();//直接调用store里面方法
    counter.content = "天若有情天亦老"//直接修改store里面的值
    count1.value = 1000//通过vue3特有的ref写法，修改store里面的值
 
}
</script>
 
<style scoped>
</style>

在store文件里面，在getters计算属性里面改变值。

 getters: {//这里是类似conputed，计算属性
        OneCount(state) {
            //这里也是直接写方法，
            //不同是actions里面是可以用this指对象，getters是把state放到传参里面
            return state.count1 = 1341 + state.content
        }
    }