- 没有mutation、没有嵌套模块,相对vuex对ts有更好的支持
一、安装
npm install pinia
二、初始化配置
src\main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
const app = createApp(App)
// 挂载到vue根实例
app.use(pinia)
app.mount('#app')
三、基本使用
3.1创建store并使用state的值
- src\store\index.ts
import { defineStore } from "pinia";
// 1.定义并导出容器
//参数1:容器的ID,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值:一个函数,调用得到容器实例
export const useMainStore = defineStore('main', {
/**
* 类似组件的data,用来储存全局状态的
* 1.必须是函数:这样是为了服务端渲染的时候避免交叉请求导致的数据状态污染
* 2.必须是箭头函数
*/
state: () => {
return {
count: 19
}
},
/**
* 类似于组件的computed,用来封装计算属性,有缓存的功能
*/
getters: {},
/**
* 类似于组件的methods,封装业务逻辑,修改state
*/
actions: {}
})
- src\components\HelloWorld.vue
- 注意直接不要解构拿值,否则不是响应式,要使用官方的storeToRefs()
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store/index";
const mainStore = useMainStore();
const { count } = storeToRefs(mainStore);
console.log(mainStore.count);
const handleChangState = () => {
mainStore.count++;
};
</script>
<template>
{{ mainStore.count }}=============={{ count }}
<button @click="handleChangState">按钮</button>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
3.2状态更新与actions
- 多个数据修改的情况下,使用$patch进行批量修改性能好
src\store\index.ts
import { defineStore } from "pinia";
// 1.定义并导出容器
//参数1:容器的ID,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值:一个函数,调用得到容器实例
export const useMainStore = defineStore('main', {
/**
* 类似组件的data,用来储存全局状态的
* 1.必须是函数:这样是为了服务端渲染的时候避免交叉请求导致的数据状态污染
* 2.必须是箭头函数
*/
state: () => {
return {
count: 19
}
},
/**
* 类似于组件的computed,用来封装计算属性,有缓存的功能
*/
getters: {},
/**
* 类似于组件的methods,封装业务逻辑,修改state
*/
actions: {
handleState(num: number) {
this.count += num
}
}
})
src\components\HelloWorld.vue
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store/index";
const mainStore = useMainStore();
const { count } = storeToRefs(mainStore);
const handleChangState = () => {
// 方法一:
// mainStore.count++;
// 方法二:
// mainStore.$patch({
// count: mainStore.count + 1,
// });
// 方法三:
// mainStore.$patch((state) => {
// state.count++;
// });
// 方法四:
mainStore.handleState(10);
};
</script>
<template>
{{ mainStore.count }}=============={{ count }}
<button @click="handleChangState">按钮</button>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
3.3getters
src\store\index.ts
import { defineStore } from "pinia";
// 1.定义并导出容器
//参数1:容器的ID,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
//返回值:一个函数,调用得到容器实例
export const useMainStore = defineStore('main', {
/**
* 类似组件的data,用来储存全局状态的
* 1.必须是函数:这样是为了服务端渲染的时候避免交叉请求导致的数据状态污染
* 2.必须是箭头函数
*/
state: () => {
return {
count: 19
}
},
/**
* 类似于组件的computed,用来封装计算属性,有缓存的功能
*/
getters: {
count10(state) {
console.log('看一下有没有被缓存')
return state.count + 10
}
},
/**
* 类似于组件的methods,封装业务逻辑,修改state
*/
actions: {
}
})
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMainStore } from "../store/index";
const mainStore = useMainStore();
</script>
<template>
{{ mainStore.count10 }}
{{ mainStore.count10 }}
{{ mainStore.count10 }}
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>