vue3 中使用 Pinia

1、安装Pinia

yarn add pinia

2、在 main.js/ts 中引入pinia， 本篇以js为例，ts中使用自己参考typeScript 添加类型

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(router).use(pinia).mount('#app')

3、新建pinia 文件夹，index.js 中代码如下

注意：最好每个模块有自己独立的文件，便于维护，若都书写在 index.js 文件中，在大型项目中会导致 index文件过于臃肿

import { createPinia } from 'pinia'
// 独立的用户信息模块
import user from '@/pinia/user'
// 整体pinia  入口
const pinia = createPinia()

export {
  pinia,
  user
}

3.1 独立模块定义
相比 vuex4 书写更简洁，并且没有 mutation 所有的提交集中在 actions 中

import { defineStore } from 'pinia'
// 定义pinia ,其中 login 是表示唯一的id
const useLoginStore = defineStore('login', {
// 这里的state 是箭头函数返回的对象，不是return出来的
  state: () => ({
  	// 这里的属性键名不能用getters actions中方法的名称重名；
    token: '',
    list: ['张三', '李四', '王五'],
    userInfo: null
  }),
  getters: {
  // 这个名称的方法是不对的，不能与state 中的键名 重名
  	userInfo(state) {
		return state.userInfo
	},
    userInfoToken(state) {
      return state.token
    },
    getUserInfo(state) {
      return state.userInfo
    }
  },
  actions: {
    setToken(value){
      this.token = value
      console.log('=setToken===state=---:', this.token)
      console.log('=setToken===value=---:', value)
      localStorage.setItem('token', this.token)
    },
    setUserInfo(value) {
      this.userInfo = value
      localStorage.setItem('userInfo', JSON.stringify(value))
    }
  }
})
export default useLoginStore

3.2、使用 user 模块

import { user } from '@/pinia'
...
setup() {
	// 非响应式
 const myUser = user()
 // 响应式
 const userInfo = reactive({
   userPinia:  user()
 })
...
// 方法中 直接使用如下
 // 调用 actions中方法
 userInfo.userPinia.setUserInfo(formRea.loginForm)
 // 直接使用 getters 中的getUserInfo  获取用户信息
 console.log('==getters==:', userInfo.userPinia.getUserInfo)
 // 想直接读取state 中属性，不能使用 reactive
 console.log('==state==:', myUser.list  )
 console.log('==state==:', myUser.userInfo  )
return {
  ...toRefs(userInfo)
 }
}
...

完整代码

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { user } from '@/pinia'
// import { useRouter } from 'vue-router'
export default {
  name: "LoginIndex",
  components: {},
  props: {},

  setup() {
    // const myRouter = useRouter()
    const myUser = user()
    const userInfo = reactive({
      userPinia:  user()
    })
    const formRea = reactive({
      loginForm: {
        name: '',
        password:'',
        code: ''
      },
      onSubmitForm() {
        userInfo.userPinia.setToken(formRea.loginForm.password)
        console.log('==getToken==:', userInfo.userPinia.userInfoToken)
        console.log('==formRea.loginForm==:', formRea.loginForm.name)
        // 调用 actions中方法
        userInfo.userPinia.setUserInfo(formRea.loginForm)
        // 直接使用 getters 中的getUserInfo  获取用户信息
        console.log('==getters==:', userInfo.userPinia.getUserInfo)
        console.log('==state==:', myUser.list  )
        console.log('==state==:', myUser.userInfo  )
        // myRouter.replace({
        //   path: "/index",
        //   params: {}
        // })
      }
    })

    return {
      ...toRefs(formRea),
      ...toRefs(userInfo)
    }
  }
}
</script>