添加全局状态管理器pinia
This commit is contained in:
范鹏
parent
89797259df
commit
1824b55782
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,3 +1,5 @@
|
||||
.idea
|
||||
.hbuilderx
|
||||
.DS_Store
|
||||
unpackage
|
||||
node_modules
|
||||
|
||||
26
main.js
26
main.js
@ -1,22 +1,18 @@
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import * as Pinia from 'pinia'
|
||||
import { createSSRApp } from 'vue'
|
||||
import { createUnistorage } from 'pinia-plugin-unistorage'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
|
||||
// pinia数据持久化
|
||||
const store = Pinia.createPinia()
|
||||
store.use(createUnistorage())
|
||||
app.use(store)
|
||||
|
||||
return {
|
||||
app
|
||||
app,
|
||||
Pinia
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
81
package-lock.json
generated
Normal file
81
package-lock.json
generated
Normal file
@ -0,0 +1,81 @@
|
||||
{
|
||||
"name": "wx-starlock",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"pinia": "^2.2.0",
|
||||
"pinia-plugin-unistorage": "^0.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.3",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/pinia": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.0.tgz",
|
||||
"integrity": "sha512-iPrIh26GMqfpUlMOGyxuDowGmYousTecbTHFwT0xZ1zJvh23oQ+Cj99ZoPQA1TnUPhU6AuRPv6/drkTCJ0VHQA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.3",
|
||||
"vue-demi": "^0.14.8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.4.0",
|
||||
"typescript": ">=4.4.4",
|
||||
"vue": "^2.6.14 || ^3.3.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
},
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pinia-plugin-unistorage": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/pinia-plugin-unistorage/-/pinia-plugin-unistorage-0.1.2.tgz",
|
||||
"integrity": "sha512-WXit2cGnm5rG6CDTcLSLehNWhyJS/Yq7WEeeXAapZbCnqoPJxlszqg7rT8S+OP47az0h5nlajGo+LuyMxUQ2uw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "2.6.14",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
|
||||
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
|
||||
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
package.json
Normal file
6
package.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"pinia": "^2.2.0",
|
||||
"pinia-plugin-unistorage": "^0.1.2"
|
||||
}
|
||||
}
|
||||
@ -2,23 +2,35 @@
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title">{{title}}</text>
|
||||
<text class="title">{{title}}{{userInfo.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useUserStore } from '../../stores/user.js'
|
||||
import { mapState, mapActions } from 'pinia'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 允许读取this.userInfo
|
||||
...mapState(useUserStore, ['userInfo'])
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
this.update()
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 允许调用this.updateUserInfo()
|
||||
...mapActions(useUserStore, ['updateUserInfo']),
|
||||
update() {
|
||||
this.updateUserInfo({ name: '123' })
|
||||
console.log(111, this.userInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -34,11 +46,8 @@
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
margin: 200rpx auto 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
@ -49,4 +58,4 @@
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
17
stores/user.js
Normal file
17
stores/user.js
Normal file
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* @description 用户信息数据持久化
|
||||
*/
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state() {
|
||||
return {
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
updateUserInfo(data) {
|
||||
this.userInfo = data
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user