1、Vuex – Mutations
对于 State 的 同步操作方法
在根Vuex下
- 单个参数 或者没有参数 定义
const mutations = { setAppName(state, name) { state.appName = name; } } export default mutations
- 单个参数 或者 没有参数 使用
this.$store.commit(mutations名,参数)
handleChangeAppName() { this.$store.commit('setAppName', 'pigisduck') // 参数可以不写 }
- 多个参数以对象的方式 定义
const mutations = { setAppName(state, params) { // params 指代传入的参数对象 state.appName = params.name; } } export default mutations
- 多个参数以对象的方式 使用
handleChangeAppName() { this.$store.commit({ type: 'setAppName', name: 'PigIsDuck' }) }
- 如果想要在 State 中 通过Mutations 添加新的字段,可以这样操作
import vue from "vue"; // 先导入 vue const mutations = { setAppVersion(state, params) {//使用 vue 的方法,才可以与视图同步 vue.set(state, 'appVersion', params.version) } } export default mutations
- 使用 vuex 的工具方法
mapMutations
import { mapState, mapGetters, mapMutations } from "vuex"; ...mapMutations([ 'setAppName' ]), handleChangeAppName() { this.setAppName({ name : 'pig' }) }
在模块下
定义
const mutations = { setUserName(state, params) { state.userName = params.name } }
使用
不使用命名空间
import { mapState, mapGetters, mapMutations } from "vuex"; ...mapMutations([ 'setUserName' ]), handleChangeUserName() { this.setUserName({ name: 'PigIsDUck' }) }
使用命名空间
// 或者是使用之前提到的 // import { createNamespacedHelpers } from 'vuex' // const { mapGetters } = createNamespacedHelpers('user') ...mapMutations('user',[ 'setUserName' ]), handleChangeUserName() { this.setUserName({ name: 'PigIsDUck' }) }
2、Vuex – Actions
对于 State 的 异步操作方法 (调用 Mutations)
在根Vuex下
- 定义
const actions = { // context : 上下文 updateAppName( context, payload ) { return new Promise((resolve, reject) => { setTimeout(() => { context.commit('setAppName', payload) resolve('成功提交') }, 1000); }) } } export default actions
- content:Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用
context.commit
提交一个 mutation,或者通过context.state
和context.getters
来获取 state 和 getters当然,也可以使用 ES 的 参数解构来简化代码
updateAppName({ commit }, payload ) { return new Promise((resolve, reject) => { setTimeout(() => { commit('setAppName', payload) // 直接使用 resolve('成功提交') }, 1000); })
- 使用 ( dispatch )
handleChangeAppName() { this.$store.dispatch({ type: 'updateAppName', name: 'adadasdsad' }) }
当然,如果使用 vuex 提供的方法
mapAction
和命名空间的方法,也和Mutations的一样
- 最后,如果我们利用
async / await
,我们可以如下组合 action:// 假设 getData() 和 getOtherData() 返回的是 Promise actions: { async actionA ({ commit }) { try { commit('gotData', await getData()) }catch( err ){ console.log(err) } }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待 actionA 完成 commit('gotOtherData', await getOtherData()) } }