Vuex的一点总结

State

import { mapState } from 'vuex'
computed: {...mapState(['']) }

this.$store.state

Getter

接受 state 作为其第一个参数,接受其他 getter 作为第二个参数

// 通过属性访问
getters: {
	getterName: (state, getters) => {
		return
	}
}
store.getters

// 通过方法访问
getters: {
	getterName: (state) => (id) => {
		return
	}
}
store.getters.getterName(props)

computed: {...mapGetters(['']) }

Mutation

// 定义
mutations: {
	increment(state) {
		// 变更state状态
	}
}
store.commit({
  type: 'increment',
  prop: 10
})

methods: {...mapMutations([''])}
this.$store.commit('')

Action

Action 提交的 mutation,而不是直接变更状态,可以包含异步操作

const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			state.count++
		}
	},
	actions: {
		increment(context) {
			context.commit('increment')
		}
	}
})
// context 对象不是 store 实例本身

methods: {...mapActions(['']) }
// 这里返回一个 Promise ,可以配合 async / await 使用
store.dispatch('actionA')

Module

// 模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
const moduleA = {
	state: {}
}

const store = new Vuex.Store({
	modules: {
		a: moduleA
	}
})
// 启用命名空间
modules: { account: { namespaced: true} }

其他

• 实现双向绑定:

  1. 用 dom 事件监听

  
  computed: {
  ...mapState({
  	message: state => state.obj.message
  })
  },
  methods: {
  	updateMessage(e) {
  		this.$store.commit('updateMessage', e.target.value)
  	}
  }
  

  2. 用 computed 的 setter

  
  computed: {
  computed: {
  	message: {
  		get() {
  			return this.$store.state.obj.message
  		},
  		set(value) {
  			this.$store.commit('updateMessage', value)
  		}
  	}
  }