本节:
一、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
}
}