上一篇文章已经介绍了pinia的基本使用，现在做一个小的案列来巩固。

数据绑定修改pinia中的状态。
在页面刷新的时候会显示pinia中的数据

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

import { createPinia } from 'pinia'
const pinia = createPinia();

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)
app.use(pinia)
app.mount('#app')

<script setup>
import {ref} from'vue'
import {userStore} from '@/store/user.js'
const userstore=userStore();

const text=ref('')

const modifyName=()=>{
  userstore.setUsername(text.value)
}
</script>

<template>
  用户名:{{ userstore.username }}
  <!-- <button @click="modifyName">修改用户名</button> -->
   <input type="text" @keydown.enter="modifyName" v-model="text">
</template>

<style scoped>

</style>

import { defineStore } from "pinia";
import { ref } from "vue";
export const userStore = defineStore('user', () => {

  const username = ref('周鑫')
  const setUsername = (newUsername) => {
    username.value = newUsername
  }

  return {
    username, setUsername
  }
}, {
  persist: true
})