vuex与pina对比学习

一、vuex学习
在src下创建store

（1）/src/store/module/user.js页面

import { reqLogin, reqUserInfo } from '@/api/user';
import { GET_TOKEN,SET_TOKEN,REMOVE_TOKEN } from '@/utils/token';
const state = {
    token: GET_TOKEN() || '',
    username:"",
    desc:"",
    roles:[],
    buttons:[]
}

const mutations = {
    SET_TOKEN: (state,token) => {
        state.token = token
    },
    SET_USERNAME: (state, username) => {
        state.username = username
    },
    SET_DESC: (state, desc) => {
        state.desc = desc
    },
    SET_ROLES: (state, roles) => {
        state.roles = roles
    },
    SET_BUTTONS: (state, buttons) => {
        state.buttons = buttons
    }
}

const actions = {
    goLogin({commit},userInfo) {
        return new Promise((resolve,reject) => {
            reqLogin(userInfo).then(res => {
                let token = res.data.token
                commit('SET_TOKEN',token)
                SET_TOKEN(token)
                resolve(res.data)
            }).catch(err => {
                reject(err)
            })
        })
    },
    getUserInfo({commit}) {
        return new Promise((resolve, reject) => {
            let params = {
                token:state.token
            }
            reqUserInfo(params).then(res => {
                commit('SET_USERNAME', res.data.username)
                commit('SET_DESC', res.data.desc)
                commit('SET_ROLES', res.data.roles)
                commit('SET_BUTTONS', res.data.buttons)
                resolve(res.data)
            }).catch(err => {
                reject(err)
            })
        })
    }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

（2）/store/index.js页面

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getter'

Vue.use(Vuex)
//自动引入module下的文件
const modulesFiles = require.context('./module', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './user.js' => 'user'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

（3）/store/getter.js页面

const getters = {
    token: state => state.user.token,
    username: state => state.user.username,
    desc: state => state.user.desc,
    roles: state => state.user.roles,
    buttons: state => state.user.buttons
}

export default getters

（4）main.js引入

// 引入状态管理
import store from './store'
new Vue({
  store
  render: h => h(App)
}).$mount('#app')

（5）使用,注意：一定要加module下的对应文件名

this.$store.dispath('user/goLogin')
this.$store.commit('user/SET_TOKEN')
this.$store.getters.token

二、pina的使用
（1）store/index.jsyemain页面

import { createPinia } from 'pinia'
// @ts-ignore
import piniaPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPersist)
export default pinia;

（2）store/user.ts

// 创建用户的小仓库
import{defineStore} from 'pinia';
import type {loginForm} from '@/api/user/type';
import type {userState} from './type'
// 引入登录接口
import {reqLogin,reqUserInfo} from '@/api/user/index'
import {SET_TOKEN,GET_TOKEN,REMOVE_TOKEN} from '../utils/token'
import {constantRoutes} from '@/router/routes'
let useUserStore = defineStore('user',{
  state:():userState => {
    return {
      token:GET_TOKEN(),
      menuRoutes:constantRoutes,
      userInfo:{
        username:''
      }
    }
  },
  actions:{
    async userLogin(data:loginForm) {
      let res = await reqLogin(data)
      if(res.code == 200) {
        this.token = res.data.token
        SET_TOKEN(res.data.token)
        return this.token
      }
    },
    async userReqInfo() {
      let res = await reqUserInfo()
      this.userInfo = res.data.checkUser
    },
    userLoginOut() {
      this.token = ''
      this.userInfo.username = ''
      REMOVE_TOKEN()
    }
  },
  getters:{}
})

export default useUserStore;

(3)main.ts引入

// 引入仓库
import pinia from '@/store/index';
app.use(pinia)

（4）使用

import useUserStore from '@/store/user'
//获取小仓库实例，直接调取
let userStore = useUserStore()
userStore.userLogin（）