pini2使用

vue3 中使用 pinia2

注意事项

vue 中使用 state 不可以解构，否则将无法响应式
如如解构使用 storeToRefs

定义状态

import { login } from '@/server/login.js'
import { getToken } from '@/utils/auth'
import { defineStore } from 'pinia'

export const userStore = defineStore({
  state: () => ({
    token: getToken(),
    user: null
  }),
  getters: {
    nikeName: state => (state.user ? state.user.nikeName : null),
    avatar: state => (state.user ? state.user.avatar : null),
  },
  actions: {
    login(loginInfo) {
      return new Promise((resolve, reject) => {
        const { username, password, rememberMe } = loginInfo
        // prettier-ignore
        login({ username, password }).then((res) => {
          const { token, user } = res
          this.user = user
          this.token = token
          resolve(res)
         }).catch((error) => {
          reject(error)
         })
      })
    }
  }
})

vue3 中使用

<script setup>
  import { userStore } from '../../store/user'
  const useStore = userStore()
  const nikeName = useStore.nikeName
  // 解构
  const { name, id } = storeToRefs(userStore)
  const login = function () {
    // prettier-ignore
    store.login(params).then(() => {
      // 
    }).catch((err) => {})
  }
</script>