美文网首页
vue3 +vuex async/await操作

vue3 +vuex async/await操作

作者: 小李不小 | 来源:发表于2024-08-26 14:44 被阅读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: {
    
      }
    })
    
    

    相关文章

      网友评论

          本文标题:vue3 +vuex async/await操作

          本文链接:https://www.haomeiwen.com/subject/dffbbltx.html