0
点赞
收藏
分享

微信扫一扫

vuex的笔记

color_小浣熊 2022-02-16 阅读 100

vuex适用于没有关联的组件之间要使用同一组数据。
action中处理异步,mutation不可以
mutation做原子操作
action可以整合多个mutation的集合
mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测) $watch 严格模式下会报错
action 异步操作,可以获取数据后调佣 mutation 提交最终数据
1、流程顺序
“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。
2、角色定位
基于流程顺序,二者扮演不同的角色。
Mutation:专注于修改State,理论上是修改State的唯一途径。
Action:业务代码、异步请求。Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时,你就知道 context 对象为什么不是 store 实例本身了。

3、限制
角色不同,二者有不同的限制。
Mutation:必须同步执行。
Action:可以异步,但不能直接操作State。
state是自定义的一些变量,需要用来保存数据,mutations是用来触发事件,相当于方法,用户需要通过触发这个方法,借此来保存数据,参数的话,第二个参数就是用户传入的值,然后在方法中赋值给state中的变量
Mutation
Mutation:专注于修改State,理论上是修改State的唯一途径。
user.js文件

state:{
    token: getToken(),
    userName: localStorage.getItem('userName'),
    userId:  localStorage.getItem('userId'),
    role: localStorage.getItem('role'),
    userKey:localStorage.getItem('userKey')
  },
 mutations:{
    setToken(state, data){
      state.token = data;
      setToken(data)
    },
    setUserName(state, data){
      state.userName = data;
      localStorage.setItem('userName', data)
    },
    setUserId(state, data){
      state.userId = data;
      localStorage.setItem('userId', data)
    },
    setRole(state, data){
      state.role = data;
      localStorage.setItem('role', data)
    },
    setUserKey(state, data){
      state.userKey = data;
      localStorage.setItem('userKey', data || '')
    },

Action
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
store.dispatch
分发Action
Action 通过 store.dispatch 方法触发。
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise。
app.js文件

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

组件中使用:

mounted() {
    const isMobile = this.$_isMobile()
    if (isMobile) {
      store.dispatch('app/toggleDevice', 'mobile')
      store.dispatch('app/closeSideBar', { withoutAnimation: true })
    }
    this.$once('hook:beforeDestroy',()=>{
      window.removeEventListener('resize', this.$_resizeHandler)
     })
  },

在组件中分发 Action
在组件中使用 this.$store.dispatch(‘xxx’) 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store)
例子:
company.js文件

    actions: { 
//获取员工信息
    queryStaffs({ commit }) {
      return new Promise((resolve) => {
        getCompanyEmployee().then(({ data }) => {
          commit('setStaffs', data)
          resolve(data)
        })
      })
}
}

组件中使用

  //获取员工信息
    handleQuery () {
      this.$store.dispatch('company/queryStaffs').then(res => {
        this.param = res
      })
    }
    
举报

相关推荐

vuex 笔记

Vuex笔记

Vuex 笔记

Vuex碎片笔记

Vuex学习笔记

vuex学习笔记

vue学习笔记--vuex

0 条评论