所有分类
  • 所有分类
  • 后端开发
vuex每日一学:了解下this.$store.dispatch方法

vuex每日一学:了解下this.$store.dispatch方法

运行环境:Windows
所需软件:Word
资源类型:简历
资源下载
仅限注册用户下载,请先
解压密码:www.icz.com 使用版权:资源收集于网络,版权归原创者所有

vuex每日一学:了解this.$store.dispatch方法。

vuex中的thiss.$store.dispatch方法

main.js

new Vue({
   el:'#app',
   router,
   store,
   render:h=>h(APP)
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from '.modules/user'
import getters from '.getters'
import permission from './modules/permission'

Vue.use(Vuex)
 const store=new Vuex.Store({
    modules:{
        permission,
	app,
	user
},
getters
})
export default store

userer在store/modules文件夹中.js,声明user并释放出来。

const user = {
  state: {
    token: '',
    roles: null,
    isMasterAccount:true,
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token ="Bearer "  token 
    },
  },
  actions: {
    // 登录
    Login({
      commit
    }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo.account, userInfo.password).then(x => {
          if(x.status==200){
            const tokenV = x.data.token.tokenValue
            commit('SET_TOKEN', tokenV)
            document.cookie=`AuthInfo=Bearer ${tokenV};path:/`;
            token="Bearer " tokenV;
            //setToken("Bearer "  token)
            resolve();
          }
          
        }).catch(error => {
          console.log(“登录失败”)
          reject(error)
        })
      })
    },
  }
}
export default user

注:必须使用commit(‘SET_TOKEN’, tokenV)调用mutations只有里面的方法才能在里面store存储成功。

handleLogin() {
   this.loading = true
    this.$store.dispatch('Login', this.loginForm).then(() => {
           this.$router.push({
               path: '/manage/merchant/account'
           }); ///登录成功后,重定向到主页
           this.loading = false
           // this.$router.push({ path: this.redirect || '/' })
       }).catch(() => {
           this.loading = false
       })
}

this.$store.dispatch(‘Login’, this.loginForm)来调取store里的user.js的login方法,以便更新。

vuex 中dispatch 和 commit 用法和差异

dispatch:包含异步操作,如向后台提交数据,写作方法: this.$store.dispatch(action方法名,值)

commit:同步操作,写法:this.$store.commit(mutations方法名,值)。

资源下载
下载价格免费
解压密码:www.icz.com 使用版权:资源收集于网络,版权归原创者所有
运行环境:Windows
所需软件:Word
资源类型:简历
原文链接:https://www.icz.com/technicalinformation/web/vue3/2023/05/8658.html,转载请注明出处~~~
0

评论0

请先
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?