Vuex学习

i. State

1）store中的属性，在state中定义

state: {
  xxx: ''
}

2）在组件中引用（一般在computed中）：

（1）直接：

computed: {
  xxxname() {
    return this.$store.state.xxx  
  }
}

（2）辅助函数：

import { mapState } from 'vuex' //外部

computed:{
  // mapState返回的是一个对象，如果不做处理，该组件中的computed对象就只有vuex的状态属性了
  // 使用【对象展开运算符】...mapState，它会将多个对象合成一个
  ...mapState({
    // 普通用法
    xxxA: state => state.xxx,
    // 命名别名（字符串相当于 state => state.xxx ）
    xxxB: 'xxx',
    // 利用vuex状态，与其他数据组合一个所需要的变量
    myxxx (state) {
      // 假设data/computed中有一个yyy，为了取得它的值，这里不能使用箭头函数
      return state.xxx + this.yyy
    }
  })
}

computed:{
  ...mapState([
    // 如果所有想设置的计算属性的名称与state属性的名称相同，可以直接传一个字符串数组
    'xxx',
    'zzz'
  ])
}

ii. Getter

1）相当于store中的computed属性（state中的相当于data中的属性）

2）在getters中定义，getters方法接受state参数和可选的其它getters作为第二个参数

getters: {
  getxxx1: state => {
    return state.xxx + 'haha'
  },
  getxxx: (state, getters) => {
    return getters.getxxx1 + 'hehe'
  },
  // 需要组件中传递参数来进行计算的时候，可以定义getter返回一个函数
  getxxx2: (state) => (outerdata) => {
    return state.xxx + outerdata
  }
}

3）在组件中引用：

（1）直接：

computed: {
  xxxname () {
    return this.$store.getters.getxxx
  },
  xxxname1 () {
    // 使用传参的getter
    return this.$store.getters.getxxx2('hehe')      
  }
}

（2）辅助函数

import { mapGetters } from 'vuex' //外部

computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getxxx',
      'getxxx1',
    ])
  }

iii.Mutation

1）更改Vuex中store中的state的唯一方法就是提交mutation

2）Mutation的定义

mutations:{
  // 一个参数版
  changexxx (state) {
    state.xxx += 'hehe'
  },
  // 有传入额外参数版
  changexxx1 (state, data) {
    state.xxx += data.txt
  },
  // 如果有必要改变state中状态的内部属性
  changexxx2 (state) {
    // 方法1
    Vue.set(state.obj, 'neoKeyValue', 'haha')
    // 方法2 利用【对象展开运算符】替换老对象
    state.obj = { ...state.obj, neoKeyValue: 'haha' }
  }
  
}

3）Mutation的提交（不过一般用Action提交）

this.$store.commit('changexxx')
this.$store.commit('changexxx1',{txt: 'hehe'})
//对象提交风格
this.$store.commit({
  type: 'changexxx1',
  txt: 'hehe'
})

4）常量来代替事件类型

（1）在store目录下新建一个mutation-types.js专门来放置Mutation事件
（2）在其中写各种事件

export const CHANGEXXX = 'CHANGEXXX'

（3）在store.js中引入

import { CHANGEXXX } from './mutation-types'

（4）使用

mutations: {
  [CHANGEXXX] (state) {
    state.xxx += 'hehe'
  }
}

!!!注意 Mutation必须是同步函数，因此一般用Action来提交Mutation

iv.Action

1）Action通过提交Mutation来间接变更状态，Action可以包括任何异步操作

2）注册一个Action

actions: {
  actionxxx (context) {
    // action提交Mutation，类比Mutation的提交 store.commit('changexxx')
    // context与store有相同方法和属性，context相当于局部的store（在模块化时有用）
    context.commit('changexxx')
  },
  // 利用参数解构简化（个p）代码
  actionxxx1 ({ commit }) {
    commit('changexxx')
  },
  // action内可以异步操作
  actionxxx2 ({ commit }) {
    setTimeout(() => {
      commit('changexxx')
    }, 500)
  },
  // 使用promise的action
  actionPromise ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('changexxx')
        resolve()
      }, 1000)
    })
  }
  // 在一个action内部触发另一个action，比如上面的promise的action
  actionxxx3 ({ dispatch, commit }) {
    return dispatch('actionPromise').then(() =>){
      commit('changexxx1')
    }
  }
  // 利用async/await 来定义action的拓扑顺序
  async actionxxx4 ({ commit }) {
    commit('changexxx', await func1())
  },
  async actionxxx5 ({ commit }) {
    await dispatch('actionxxx4')
    commit('changexxx1', await func2())
  }
}

3）组件中Action触发（分发）

（1）直接触发

this.$store.dispatch('actionxxx')
// 触发有promise的action
this.$store.dispatch('actionPromise').then(() => {
  console.log('hehe')
})

（2）通过辅助函数mapActions（一般在methods中使用）

import { mapActions } from 'vuex'
//-------------------- 省略其他 -------------------------
methods: {
  ...mapActions([
    'actionxxx',
    'actionxxx1'
  ]),
  // 或者取别名
  ...mapActions({
    myAction：'actionxxx2',
    // 触发有promise的action
    myAction1: actionPromise => this.$store.dispatch('actionPromise').then(() => {
      console.log('hehe')
    })
  })
}

v. Module