企业策划书模板范文大学生_常用网页制作工具有哪些_汕头网站建设平台_吉林网络seo

1.新增user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('userStore', {

  actions: {

    changeUserName(value: string) {

      if (value && value.length < 10) this.username += value

    },

  },

  getters: {

    getUserName(): string {

      return this.username.toUpperCase()

    },

  },

  state() {

    return {

      username: 'aaaa',

      age: 18,

      sex: '男',

    }

  },

})

2.在app.vue使用

<template>

  <div id="app">

    <h1>TO DO LIST! {{ userInfo.username.value }}</h1>

    <p>

      <RouterLink to="/home">首页</RouterLink>

      <RouterLink :to="{ path: '/about' }">关于</RouterLink>

      <RouterLink replace :to="{ name: 'news' }">事项</RouterLink>

    </p>

    <div class="content">

      <RouterView />

    </div>

  </div>

</template>

<script setup lang="ts">

import { useUserStore } from '@/store/user.ts'

import { toRefs } from 'vue'

import { storeToRefs } from 'pinia'

const user = useUserStore()

console.log(user.getUserName)

// 修改

user.$patch({

  username: '小蓝',

})

user.changeUserName('小白')

const userInfo = storeToRefs(user)

</script>