vue3 +vuex async/await操作

2024-08-26  本文已影响0人  小李不小
<script>
import {defineComponent,reactive,ref,onMounted} from 'vue'
import store from './../../store/index.ts'

      onMounted(()=>{ //界面和方法加载完之后
        //vue使用vuex的方法  
        store.dispatch('login',{'name':'小明'}).then(res=>{
          console.log('login-tag',res)
        })
      })

</script>

###vuex文件


import { createStore } from 'vuex'

export default createStore({
  state: {
      token:'',
      user:undefined
  },
  mutations: { //mutations只能通过actions来触发 
    Login(state,payload){
          state.user=payload;
          state.token='token_look'
          console.log('login--111-',state)
    }

  },
  
  actions: {

    async is(){
        return 'hello world'
    },

    
//{dispatch,commit} es6的解析来展示的

     login({dispatch,commit},payload){

    conosle.log(payload) //传递过来的值
      return new Promise((resolve)=>{  //通过promise 来返回-回调
          setTimeout(() => {
            commit('Login')  //派发mutations中的方法
//当派发的 commit('Login')  方法被执行完成之后,就会触发 resolve中的回调
            resolve('我是回调')
          }, 1000)
      })
     

    }
  },
  modules: {

  }
})

上一篇 下一篇

猜你喜欢

热点阅读