Vue状态管理vuex之mutation

vuex流程

在绿色线框中，首先从API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中，在组件中触发一个action，action里面有一个ajax请求，去请求后端的一个接口，拿到数据以后我们只需要改变state中的状态就可以了，改变状态的唯一方式是commit提交一个mutation，提交以后state状态改变了，状态改变后视图就会改变因为Vuex是响应式的。

mutation

通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。切记：Vuex中store数据改变的唯一方法就是mutation！

eg1更改状态值

组件页面

<button @click="handleChangeAppName">修改appName</button>

methods: {
    handleChangeAppName () {
      // 第一个参数为mutation.js中方法的名称
      // 第二个参数为新值
      this.$store.commit('SET_APP_NAME', 'newAppName')
      // 传入对象的方式
      // this.$store.commit('SET_APP_NAME', {
      //   appName: 'newAppName'
      // })
    }
  }

mutation.js

const mutations = {
  // 第一个参数指代同级的state.js中的state对象
  // 第二个参数为载荷值，可以为一个或一个参数
  SET_APP_NAME (state, params) {
    state.appName = params
    //params.newAppName
  }
}
export default mutations

如果状态值未设置,我们可以在mutation.js中对其进行设置

 SET_APP_VERSION (state) {
    // 使用vue的set方法
    // 第一个参数定义给谁设置值
    // 第二个参数定义值的名称
    // 第三个值为需要设置的值
    vue.set(state, 'appVersion', 'v3.0')
  }

组件页面

methods: {
    handleChangeAppName () {
      this.$store.commit('SET_APP_VERSION')
    }
  }

computed: {
    ...mapState({
      appVersion: state => state.appVersion
    })
  }

mutation的工具方法mapMutations

在组件页面中引入mapMutations

import { mapState, mapGetters, mapMutations } from 'vuex'

使用展开操作符将mutation.js中定义的方法放入

 methods: {
    ...mapMutations([
      'SET_APP_NAME'
    ]),
    handleChangeAppName () {
      this.SET_APP_NAME('appName')
    }
  }

eg2修改模块中的userName

在user.js中定义mutation对象

const mutations = {
  SET_USER_NAME (state, params) {
    state.userName = params
  }
}

在组件页面定义

<button @click="changeUserName">改变模块userName</button>

methods: {
    ...mapMutations([
      'SET_USER_NAME'
    ])
    changeUserName () {
      this.SET_USER_NAME('whisky')
    }
  }