From da0d0a651303fc87be23094f2067e174dc5fb2f7 Mon Sep 17 00:00:00 2001 From: Nex Zhu <4370605+NexZhu@users.noreply.github.com> Date: Tue, 28 Dec 2021 18:37:34 +0800 Subject: [PATCH] feat: add Pinia --- README.md | 1 + package-lock.json | 72 +++++++++++++++++++++++++++++++++++ package.json | 1 + src/app.ts | 19 +++++---- src/components/UserCenter.vue | 8 ++-- src/pages/index.vue | 6 ++- src/stores/counter.ts | 21 ++++++++++ src/stores/user.ts | 21 ++++++++++ src/types/auto-imports.d.ts | 1 - src/types/components.d.ts | 1 - 10 files changed, 133 insertions(+), 18 deletions(-) create mode 100644 src/stores/counter.ts create mode 100644 src/stores/user.ts diff --git a/README.md b/README.md index 96ff7f0..7358e09 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Basic: `master` branch: - [Element Plus](https://element-plus.org/): component library +- [Pinia](https://pinia.vuejs.org/): state management - [Iconify](https://iconify.design/) icons with [unplugin-icons](https://github.com/antfu/unplugin-icons) `antd` branch: diff --git a/package-lock.json b/package-lock.json index 2241239..c777c2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "eslint-webpack-plugin": "^3.1.1", "husky": "^7.0.4", "lint-staged": "^12.1.4", + "pinia": "^2.0.9", "postcss-html": "^1.3.0", "stylelint": "^14.2.0", "stylelint-config-property-sort-order-smacss": "^8.0.0", @@ -9791,6 +9792,58 @@ "node": ">=6" } }, + "node_modules/pinia": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.9.tgz", + "integrity": "sha512-iuYdxLJKQ07YPyOHYH05wNG9eKWqkP/4y4GE8+RqEYtz5fwHgPA5kr6zQbg/DoEJGnR2XCm1w1vdt6ppzL9ATg==", + "dev": true, + "dependencies": { + "@vue/devtools-api": "^6.0.0-beta.21", + "vue-demi": "*" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.2.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/vue-demi": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz", + "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==", + "dev": true, + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", @@ -21543,6 +21596,25 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==" }, + "pinia": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.9.tgz", + "integrity": "sha512-iuYdxLJKQ07YPyOHYH05wNG9eKWqkP/4y4GE8+RqEYtz5fwHgPA5kr6zQbg/DoEJGnR2XCm1w1vdt6ppzL9ATg==", + "dev": true, + "requires": { + "@vue/devtools-api": "^6.0.0-beta.21", + "vue-demi": "*" + }, + "dependencies": { + "vue-demi": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz", + "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==", + "dev": true, + "requires": {} + } + } + }, "pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", diff --git a/package.json b/package.json index c830b62..53d1c90 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "eslint-webpack-plugin": "^3.1.1", "husky": "^7.0.4", "lint-staged": "^12.1.4", + "pinia": "^2.0.9", "postcss-html": "^1.3.0", "stylelint": "^14.2.0", "stylelint-config-property-sort-order-smacss": "^8.0.0", diff --git a/src/app.ts b/src/app.ts index deff1d3..ae4c200 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,7 +1,15 @@ import { access } from '@fesjs/fes' +import type { App } from 'vue' +import { createPinia } from 'pinia' + import PageLoading from '~/components/PageLoading.vue' import UserCenter from '~/components/UserCenter.vue' +export function onAppCreated({ app }: { app: App }) { + const pinia = createPinia() + app.use(pinia) +} + export const beforeRender = { loading: PageLoading, action() { @@ -9,21 +17,12 @@ export const beforeRender = { return new Promise((resolve) => { setTimeout(() => { void setRole('admin') - // 初始化应用的全局状态,可以通过 useModel('@@initialState') 获取,具体用法看@/components/UserCenter 文件 - resolve(state) + resolve({}) }, 1000) }) }, } -export type State = { - userName: string -} - -const state: State = { - userName: 'harrywan', -} - export const layout = { customHeader: UserCenter, } diff --git a/src/components/UserCenter.vue b/src/components/UserCenter.vue index f740dbe..c845229 100644 --- a/src/components/UserCenter.vue +++ b/src/components/UserCenter.vue @@ -3,15 +3,15 @@ - {{ initialState.userName }} + {{ name }}