前言
最近发现vue中出了个Pinia，与vuex一样用来管理状态的, 提前简单学习一下。
Pinia官网： Pinia
基本格式：
import { defineStore } from 'pinia'
export const useUserStore = defineStore({
id: 'user', // id必填，保证在Store中唯一
state: () =>({}),
getters: {},
actions: {}
})
以下内容都是基于vue3的
基本使用
1、安装
npm install pinia@next
2、main.js中引用pinia
在main.js文件中创建一个 pinia（根存储）并将其传递给应用程序
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia'
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
3、在src下面新建store文件夹，在建一个index.ts文件 src/store/index.ts
import { defineStore } from "pinia" // 定义容器
// id：必须的，保证在Store中唯一, 两种写法
// export const piniaStore1 = defineStore('userId', {});
// export const piniaStore2 = defineStore({id: 'userId',});
export const piniaStore = defineStore('userId', {
// 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
// 2.TS 类型推导, 结合了TS
state: () => {
return {
count: 0,
count2: 2
}
},
// 用来封装计算属性 有缓存功能 类似于computed
getters: {
getNum(state) {
return state.count;
},
getNum2(state) {
return state.count2;
}
},
// 编辑业务逻辑 类似于methods
actions: {
updateCount() {
this.count ++;
},
updateCount2(data: number) {
this.count2 = data;
}
}
})
4、页面上的基本使用
<template>
<div class="home">页面A内容</div>
<h1>{{ piniaStore.getNum }}</h1>
<h1>{{ piniaStore.getNum2 }}</h1>
<a-button type="primary" @click="changedCount">通过Pinia变更count</a-button>
<a-button type="primary" @click="changedCount2">通过Pinia变更count2</a-button>
</template>
<script>
import { piniaStore } from '@/store'; // 引入store
// const piniaStore = piniaStore(); // 不要在这里全局引用，不然会造成未安装pinia的错误
export default {
name:'',
data () {
return {
piniaStore: piniaStore(), // 可以在这里引用pinia store
};
},
computed: {},
methods: {
changedCount() {
// 每次加1
this.piniaStore.updateCount();
},
changedCount2() {
// 直接变更值
this.piniaStore.updateCount2(5);
},
},
// setup里面的使用
setup() {
// 获取store
const store = piniaStore();
return {
// store...
}
},
}
</script>
