注意点：pinia小仓库中不需要使用ref和reactive实现双向响应式
1、下载pinia
我的版本："pinia": "^2.1.6",
npm i pinia
2、在src下面创建store和里面的文件
结构如下
-src
-store
-modules //每个模块中小仓库
user.js
index.js
3、入口文件main.js
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store/index.js"; //导入仓库
const app = createApp(App);
app.use(store); //使用仓库
app.mount("#app");
4、store/index.js
//创建大仓库
import { createPinia } from "pinia";
//createPinia方法可以用于创建大仓库
let store = createPinia();
//对外暴露，安装仓库
export default store;
5、store/modules/user.js
//定义info小仓库
import { defineStore } from "pinia";
//创建小仓库
let useSocketStore = defineStore("userStore", {
state: () => {
return {
name:"小陈",
age:18
};
},
// 异步|逻辑的地方
actions: {
consoleLogName() {
console.log(this.name); //小陈
}
},
});
export default useSocketStore;
6、组件使用
<script setup>
import UserStore from "@/store/modules/user.js";
let userStore= UserStore ();
console.log(userStore.name); //小陈
userStore.consoleLogName(); //小陈
</script>
