說明
使用uni-app開發(fā)，選擇vue3語法，開發(fā)工具是HBliuderX。雖然內(nèi)置有vuex，但是個人還是喜歡用Pinia，所以就添加進(jìn)去了。
Pinia官網(wǎng)連接
添加步驟
第一步：
在項目根目錄下執(zhí)行命令：
npm install pinia
第二步：
配置main.js文件
// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia'; // 配置pinia第一句
export function createApp() {
const app = createSSRApp(App)
// 狀態(tài)管理
const store = Pinia.createPinia(); // 配置pinia第二句
// 持久化
app.use(store); // 配置pinia第三句
return {
app,
Pinia // 配置pinia第四句
}
}
// #endif
第三步，使用：
創(chuàng)建store文件夾、創(chuàng)建store/index.js
import {
appStore
} from "./modules/app.js"
const useStore = () => ({
app: appStore(),
});
export default useStore;
/**
* 用法
* import useStore from "@/store/index.js"
const {
app
} = userStore();
let app = app.appIndex
*/
然后創(chuàng)建store/modules/app.js文件
import {
defineStore
} from 'pinia'
export const appStore = defineStore('app', {
unistorage: true, // 是否持久化到內(nèi)存
state: () => {
return {
// 測試
appIndex: 999,
}
},
actions: {}
})
像下面這個樣子：
使用：
在js文件夾下導(dǎo)入使用即可
import useStore from "@/store/index.js"
const {
app
} = userStore();
let app = app.appIndex
完整一點的示例：文章來源：http://www.zghlxwxcb.cn/news/detail-771286.html
<script>
import useStore from "@/store/index.js"
const {app} = useStore();
export default {
data() {
return {
text:"",
}
},
methods: {
getText(){
this.text = app.appIndex;
}
}
</script>
如果有更好的方法，歡迎大家一起討論！文章來源地址http://www.zghlxwxcb.cn/news/detail-771286.html
到了這里，關(guān)于uni-app開發(fā)微信小程序 vue3寫法添加pinia的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
