pinia使用指南Pinia 是 Vue 新一代的状态管理器

前言

什么是pinia

Pinia 是 Vue 新一代的状态管理器。同时适用于 Vue 2 和 Vue 3。在vue3中有人可能会使用export const state = reactive({})来共享全局状态. 但是这样在SPA页面中还行，在SSR应用中则会出现 安全漏洞

pinia的特点

• 支持options api 和 composition api
• 去除 mutations 比vuex更加精简
• 在页面或者组件直接引用后使用, 数据来源更加清晰调试更加方便
• 全面的TypeScript支持
• 服务器端渲染支持
• 轻量 压缩后的体积只有1kb左右

下载

npm install pinia --save

yarn add pinia

使用

import { createPinia } from 'pinia'
app.use(createPinia())

• 定义state 和 getters

  import { defineStore } from 'pinia'
  export const PublicStore = defineStore('Public', { 
      state: () => {
          return {
              userMsg: {},
          }
      },
      getters: {
          getUserMsg: (state) => {
              return state.userMsg
          },
      },
  
  })
  

• 访问state 和 getters 两者的使用非常相似

  • 在Composition API中```js import { PublicStore } from '@/store/Public' const store = PublicStore() console.log(store.getUserMsg.userName, store.userMsg.token) const { getUserMsg, userMsg } = { …PublicStore() } console.log(getUserMsg.userName, userMsg.token)

    ```

  • state直接解构会使其失去响应式，这时候可以用 pinia 的 `storeToRefs````js import { PublicStore } from '@/store/Public' import { storeToRefs } from 'pinia' const { getUserMsg, userMsg } = storeToRefs(PublicStore()) console.log(getUserMsg.value.userName, userMsg.value.token)

    ```

  • 在Option API中 需要使用辅助函数 `mapState````js import { PublicStore } from '@/store/Public' import { mapState } from 'pinia' export default { name: 'Home', computed: { …mapState(PublicStore, ['getUserMsg', 'userMsg']), …mapState(PublicStore, { aliasUserMsg: 'userMsg', aliasGetUserMsg: 'getUserMsg', userName: store => store.userMsg.userName + store.getUserMsg.token, getTooken(store) { return [store.getUserMsg, store.userMsg, this.getUserMsg] } }), } };

    ```

• 定义actions

  import { defineStore } from 'pinia'
  import { Auth } from './auth' 
  export const PublicStore = defineStore('Public', {
  
     actions: {
         setUserMsg(userMsg) {
             this.userMsg = userMsg
         },
         async setUserMsgToken(userMsg) { 
             const authStore = Auth()
             let res = await authStore.setPower() 
             if (res) {
                 userMsg.authList = authStore.power
                 this.userMsg = userMsg
                 return true
             } else {
                 return false
             }
         }
     }
  })
  

  import { defineStore } from 'pinia'
  import api from '@/api'
  export const Auth = defineStore('Auth', {
      state: () => {
          return {
              power: [],
          }
      },
  actions: {
      async setPower() {
          let res = await api.BaseApi.getPower() 
          if (res.code === 200) {
              this.power = res.data
              return true
          }
      }
  }
  })
  

• 使用actions

  • 在Composition API中

    import { PublicStore } from '@/store/Public'
    const store = PublicStore()
    const update = async () => {
    let power = await store.setUserMsgToken({ userName: '涵涵',token: '234523423423423',authList: [] })
    if (power) {
    
    } else {
    
    }
    }
    

  • 在Option API中 使用mapActions辅助函数

    import { PublicStore } from '@/store/Public'
    import {  mapActions } from 'pinia'
    export default {
        name: 'Home',
        methods: {
            ...mapActions(PublicStore, ['setUserMsg']),
            ...mapActions(PublicStore, {
                setUserMsgToken: 'setUserMsgToken'
            }),
            async update() {
            let power = await this.setUserMsgToken({userName: '憨憨',token: '54735634545',authList: [] })
            if (power) {
        } else {
    
        }
    },
    }
    };
    

• 重置数据 reset

  import { PublicStore } from '@/store/Public' 
  const store = PublicStore()
  store.$reset()
  
  
  import { PublicStore } from '@/store/Public'
  export default {
      methods: {
          reset() {
              const store = PublicStore() 
              store.$reset() 
          }
      }
  };