From f18f20eaa4b2a30b227e0144f612d4bc060b4a84 Mon Sep 17 00:00:00 2001 From: maochaoying <925670706@qq.com> Date: Mon, 6 Mar 2023 12:51:10 +0800 Subject: [PATCH] =?UTF-8?q?feature:=20=E5=BC=95=E5=85=A5pinia?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 - package.json | 1 + public/vite.svg | 1 - src/App.vue | 27 ++----------- src/assets/vue.svg | 1 - src/components/Count.vue | 25 ++++++++++++ src/components/HelloWorld.vue | 40 ------------------- src/main.js | 3 +- src/store/index.js | 6 +++ src/store/modules/count.js | 27 +++++++++++++ src/style.css | 89 ------------------------------------------- yarn.lock | 15 +++++++- 12 files changed, 78 insertions(+), 158 deletions(-) delete mode 100644 public/vite.svg delete mode 100644 src/assets/vue.svg create mode 100644 src/components/Count.vue delete mode 100644 src/components/HelloWorld.vue create mode 100644 src/store/index.js create mode 100644 src/store/modules/count.js diff --git a/index.html b/index.html index 795e4fb..6e11604 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - Vite + Vue diff --git a/package.json b/package.json index a175a9e..70d7641 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "pinia": "^2.0.32", "vue": "^3.2.45", "vue-router": "^4.0.13" }, diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 341dbf0..851504f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,30 +1,9 @@ - + diff --git a/src/assets/vue.svg b/src/assets/vue.svg deleted file mode 100644 index 770e9d3..0000000 --- a/src/assets/vue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Count.vue b/src/components/Count.vue new file mode 100644 index 0000000..9326b98 --- /dev/null +++ b/src/components/Count.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index d3c3f15..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/src/main.js b/src/main.js index 2cb7f2f..13daef9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import { createApp } from 'vue' import router from './router' +import store from './store' import App from './App.vue' import './style.css' -createApp(App).use(router).mount('#app') +createApp(App).use(router).use(store).mount('#app') diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..c149d67 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,6 @@ +import { createPinia } from 'pinia' +import { useCountStore } from './modules/count' +const store = createPinia() + +export default store +export { useCountStore } diff --git a/src/store/modules/count.js b/src/store/modules/count.js new file mode 100644 index 0000000..d2d6ec3 --- /dev/null +++ b/src/store/modules/count.js @@ -0,0 +1,27 @@ +import { defineStore } from 'pinia' +export const useCountStore = defineStore({ + id: 'count', // id必填，且需要唯一 + // state + state: () => { + return { + count: 0, + } + }, + // getters + getters: { + doubleCount: state => { + return state.count * 2 + }, + }, + // actions + actions: { + // actions 同样支持异步写法 + countAdd() { + // 可以通过 this 访问 state 中的内容 + this.count++ + }, + countReduce() { + this.count-- + }, + }, +}) diff --git a/src/style.css b/src/style.css index 84a0050..e69de29 100644 --- a/src/style.css +++ b/src/style.css @@ -1,89 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/yarn.lock b/yarn.lock index 972cfa9..56bb888 100644 --- a/yarn.lock +++ b/yarn.lock @@ -164,7 +164,7 @@ "@vue/compiler-dom" "3.2.47" "@vue/shared" "3.2.47" -"@vue/devtools-api@^6.0.0": +"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.5.0": version "6.5.0" resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07" integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q== @@ -301,6 +301,14 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== +pinia@^2.0.32: + version "2.0.32" + resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.32.tgz#93a12df4416566c1bb49225a078fe20b982350be" + integrity sha512-8Tw4OrpCSJ028UUyp0gYPP/wyjigLoEceuO/x1G+FlHVf73337e5vLm4uDmrRIoBG1hvaed/eSHnrCFjOc4nkA== + dependencies: + "@vue/devtools-api" "^6.5.0" + vue-demi "*" + postcss@^8.1.10, postcss@^8.4.21: version "8.4.21" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4" @@ -358,6 +366,11 @@ vite@^4.1.0: optionalDependencies: fsevents "~2.3.2" +vue-demi@*: + version "0.13.11" + resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99" + integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A== + vue-router@^4.0.13: version "4.0.13" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.13.tgz#47f06e2f8ff6120bfff3c27ade1356cc9de7d870"