From ca37a1831fc810ae2d1059b667a26581e68b0a9a Mon Sep 17 00:00:00 2001
From: cirry <812852553@qq.com>
Date: Wed, 27 Apr 2022 23:57:05 +0800
Subject: [PATCH] =?UTF-8?q?feature:=E5=85=88=E5=AD=A6=E4=B8=80=E7=82=B9?=
=?UTF-8?q?=EF=BC=8C=E6=98=8E=E5=A4=A9=E5=AD=A6demo=EF=BC=8C=E5=AD=A6?=
=?UTF-8?q?=E5=AE=8C=E8=87=AA=E5=B7=B1=E7=BB=83=E4=B8=AA=E6=89=8B=E5=B0=B1?=
=?UTF-8?q?=E5=B7=AE=E4=B8=8D=E5=A4=9A=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 3 +-
src/components/HelloWorld.vue | 88 +++++++++++++----------------------
src/main.ts | 11 ++++-
src/store/index.ts | 28 +++++++++++
4 files changed, 71 insertions(+), 59 deletions(-)
create mode 100644 src/store/index.ts
diff --git a/src/App.vue b/src/App.vue
index 76c1ac0..d74c13c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
-
-
+
-
-
-
diff --git a/src/main.ts b/src/main.ts
index 01433bc..e766dee 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,13 @@
import { createApp } from 'vue'
import App from './App.vue'
+import { createPinia } from "pinia";
-createApp(App).mount('#app')
+// 1. 实例化pinia
+const pinia = createPinia()
+
+const app = createApp(App)
+
+// 2. 挂载pinia
+app.use(pinia)
+
+app.mount('#app')
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 0000000..c65f325
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,28 @@
+// 1.定义容器
+import { defineStore } from "pinia";
+
+// 参数1: 容器id,必须唯一,将来pinia会把所有的容器挂载到根容器
+// 参数2: 选项对象
+export const userMainStore = defineStore('main', {
+
+ // 类似于data
+ // 必须是函数: 这样是为了服务端渲染的时候表面交叉请求导致的数据状态污染???
+ // 必须是箭头函数,为了更好的ts的类型推断
+ state: () => ( { count: 50, foo: 'ccc' } ),
+ getters: {
+ // 函数接受一个可选参数,state状态对象
+ count10( state ) {
+ return state.count+5
+ },
+ },
+ actions: {
+ // 不能使用箭头函数,this会绑定到外部去
+ changeState() {
+ this.count++;
+ this.foo += '='
+ }
+ }
+})
+// 2.使用容器中的state
+// 3.修改state
+// 4.容器中action的使用