JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Pinin使用的两种方法

2024. 08. 27    

Pinin 使用的两种方法

Pinin 在Vue3中使用的两种方法

基础配置

main.ts
// import { createApp } from 'vue'
import { createPinia } from 'pinia'

// import App from './App.vue'
// import router from './router'

// const app = createApp(App)

app.use(createPinia())
// app.use(router)

// app.mount('#app')

初始化1

stores/counter.ts
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

使用 1

使用页面 1
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";


const store = useCounterStore();
// storeToRefs 
  // 函数用于解析 store 如果直接结构 let { count } = store; 这样，是不能赋值的
let { count } = storeToRefs(store);
let { increment } = store;
console.log(count);


// 点击发送
const sendFn = () => {
    console.log(content.value);
    // count.value = 90;
    console.log(increment());
};

初始化 2

stores/user 2
import { ref } from 'vue'
import { defineStore } from 'pinia'

export default defineStore('user', () => {
  const sessionKey = ref<string>()
  const userName = ref<string>()
  const loginId = ref<string>()
  const tableAuthList = ref<TableAuth[]>() // 数据表格权限

  // 通过密码登录
  // 登录逻辑获取数据
  
  return {
    loginId,
    sessionKey,
    userName,
    tableAuthList
  }
})

使用 2

使用页面 2
<template>
<div></div>
</template>
import user from '@/stores/user'

const dataList = ref<TableAuth[]>()
dataList.value = user().tableAuthList
# Vue3