vue2和vue3使用vuex的方式方法

一、vuex的含义：vuex是实现组件全局数据管理的一种机制，可以实现组件之间的数据共享和共同调用相同方法。

什么时候适合存储在vuex中，组件数据共享、方法共享时。

二、用法：

export default store({
    state:{ // 这个相当于组件里的data
        userInfo:null
    },
    mutations:{ // 这个相当于组件的methods
       setUserInfo(state,data) {
       state.userInfo = data
       localStorage.setItem('USER', JSON.stringify(data))
    },
    actions:{
      LoginByUsername ({ commit }, userInfo = {}) {
         const user = encryption({
              data: userInfo,
              type: 'Aes',
              key: 'avue',
              param: ['useranme', 'password']
          });

          return new Promise((resolve) => {
            loginByUsername(user.username, user.password, userInfo.code,                     
             userInfo.redomStr).then(res => {
               const data = res.data.data;
               commit('SET_TOKEN', data);
               commit('SET_REFRESH_TOKEN', data);
               commit('DEL_ALL_TAG', []);
               commit('CLEAR_LOCK');
               resolve();
            })
         })
       }
    }, // 异步
    getters:{//相当于computed
       getUserInfo(state){
          return state.userInfo
       },
       getInfo(state,data){
           return state.userInfo=data
       }
    },
    modules:{}
})


<h3>当前用户信息为：{{$store.state.userInfo}}</h3>

// vue2 在组件模板使用
mounted(){
    let user=this.$store.state.userInfo
},
methods:{
    this.$store.commit('方法名setUserInfo',data)
    //this.$store.commit() 是触发 mutations的第一种方式 
    this.$store.getters.getUserInfo()
    //this.$store.getters.名称   是触发getters的第一种方法
    this.$store.dispatch('LoginByUsername',data)
    //  this.$store.dispatch()  是触发actions的第一种方法
}

// vue3 组件模板使用
import { mapState, useStore } from 'vuex'
export default {
    setup() {
        // useStore要从vuex里取，然后在调用store的方法
        const store = useStore()
        onMounted(()=>{
            console.log(store)
        })
        const user= store.state.userInfo
        return {
          user
        }
    }
}