微信小程序-EventChannel

前言

本文中的代码是基于之前代码基础上的改造，本篇文章来和大家讲解下pinia在ts和vue3中如何简单使用,文章只介绍简单用法，具体的那些骚操作请自行去查询文档。

依赖安装

npm i pinia pinia-plugin-persistedstate

创建文件

• src下创建store文件夹，然后创建index.ts文件
• src下创建store文件夹，然后创建modules文件夹，然后创建user.ts文件
  结构如下图
  

给文件添加内容

src/store/modules/user.ts

这里和vue2的vuex很像，其中persist: false表示不需要持久化，如果需要持久化，可以改成true，当然也可以写指定的key等操作，持久化的意思就是存入浏览器的localStorage中，下次打开浏览器还是之前的数据

import { defineStore } from 'pinia';
import { store } from '@/store';

export const useUserStore = defineStore('user', {
  state: () => ({
    username: '',
    isAdmin: false,
  }),
  actions: {
    setValue(param: { username: string; isAdmin: boolean }) {
      this.username = param.username;
      this.isAdmin = param.isAdmin;
    },
  },
  persist: false,
});

export function getUserStore() {
  return useUserStore(store);
}

src/store/index.ts

import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';

const store = createPinia();
store.use(createPersistedState());

export { store };

export * from './modules/user';

export default store;

main.ts

import { createApp } from 'vue';
import router from './router';
import App from './App.vue';
import { store } from './store';

const app = createApp(App);

app.use(router);
app.use(store);
app.mount('#app');

测试使用

展示

将home.vue修改成以下代码

<template>
    <div>
        {{ userStoreRef.isAdmin}}
    </div>
</template>
<script setup lang="ts">
import {useUserStore} from "@/store/index";
import {storeToRefs} from "pinia"
const userStore = useUserStore();
const userStoreRef = storeToRefs(userStore);
</script>

修改值并展示

将home.vue修改成以下代码

<template>
    <div>
        用户名：{{userStoreRef.username.value}}
    </div>
    <div>
        权限：{{ userStoreRef.isAdmin.value}}
    </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import {useUserStore} from "@/store/index";
import {storeToRefs} from "pinia"
const userStore = useUserStore();
const userStoreRef = storeToRefs(userStore);
onMounted(()=>{
    userStore.setValue({
        username: 'admin',
        isAdmin: true
    })
})
</script>

好了，本文就分享到这里了，封装代码我放在了我的git仓库下期再见!