vuex使用原创

总体流程

store => mutation => action => 组件内this.$store.dispatch()调用(非async异步)

store

 const getters = {
  token: state => state.user.token,
  userAvatar: state => state.user.userAvatar,
  userProfile: state => state.user.userProfile
}

1
2
3
4
5

mutation

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_PROFILE: (state, userProfile) => {
    state.userProfile = userProfile
  },
  SET_AVATAR: (state, userAvatar) => {
    state.userAvatar = userAvatar
  },
}

1
2
3
4
5
6
7
8
9
10
11
12

action

const action = {
    updateInfo({ commit, state }, data) {
    const { profile, avatar } = data
    return new Promise((resolve, reject) => {
      changeProfile({
        userProfile: profile,
        userAvatar: avatar
      }, state.token).then(res => {
        const { userProfile, userAvatar } = res.data
        if (res.code !== 0) {
          reject('请求参数错误')
        }
        commit('SET_PROFILE', userProfile)
        commit('SET_AVATAR', userAvatar)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

组件内使用

updateUserInfo() {
  this.$store.dispatch('user/updateInfo', this.form).then(() => {
    this.$message({
      message: '修改成功',
      type: 'success',
      duration: 5 * 1000
    })
    this.dialogFormVisible = false
    this.flag = !this.flag
    this.form.profile = ''
  })
}

1
2
3
4
5
6
7
8
9
10
11
12

#前端

上次更新: 2024/01/14 16:27:31

← mavon-editor局部引入注意事项→