LuCodeAdminMix/normal/src/components/dev/Store.vue

<script setup>
/***
 * name：状态管理 示例
 * user：sa0ChunLuyu
 * date：2022-04-13 09:20:12
 */
// Pinia
import {useStore} from "~/store";

const $store = useStore()
// Pinia end

// Session
const session_count = useStorage('session_count', 0, sessionStorage)
// Session end

// Local
const local_count = useStorage('local_count', 0)
// Local end
</script>
<template>
  <tr>
    <td>Pinia</td>
    <td>{{ $store.count }}</td>
    <td>
      <n-space>
        <n-button secondary strong @click="$store.count++">增加</n-button>
        <n-button secondary strong @click="$store.count--">减少</n-button>
      </n-space>
    </td>
  </tr>
  <tr>
    <td>Session</td>
    <td>{{ session_count }}</td>
    <td>
      <n-space>
        <n-button secondary strong @click="session_count++">增加</n-button>
        <n-button secondary strong @click="session_count--">减少</n-button>
      </n-space>
    </td>
  </tr>
  <tr>
    <td>Local</td>
    <td>{{ local_count }}</td>
    <td>
      <n-space>
        <n-button secondary strong @click="local_count++">增加</n-button>
        <n-button secondary strong @click="local_count--">减少</n-button>
      </n-space>
    </td>
  </tr>
</template>