Vuex的一点总结
Stateimport { mapState } from 'vuex'computed: {...mapState(['']) }this.$store.stateGetter接受 state 作为其第一个参数,接受其他 getter 作为第二个参数// 通过属性访问getters: {getterName: (state, getters) => {return}}store.gette
·
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} }
其他
-
实现双向绑定:
- 用
dom
事件监听
computed: { ...mapState({ message: state => state.obj.message }) }, methods: { updateMessage(e) { this.$store.commit('updateMessage', e.target.value) } }
- 用
computed
的setter
computed: { computed: { message: { get() { return this.$store.state.obj.message }, set(value) { this.$store.commit('updateMessage', value) } } }
- 用
更多推荐
已为社区贡献8条内容
所有评论(0)