Vuex核心
- Store
- State
- Mutation
- Action
- Module
Vuex 的工作流程图
112263-6fd755db3b988245.png
下面我们可以逐一理解
Store 可以理解成一个容器，包涵了State等
const mutations = {...};
const actions = {...};
const state = {...};
const getter = {...};
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
State
状态树 负责存储整个状态数据 一般需要注入store中
const state = {
num:123,
str:'这是一个很长的文字。。。。'
}
使用方法 1.直接使用 2.使用vuex提供的语法糖
1. this.$store.state.num
2. import {mapState} from 'vuex'
computed: {
...mapState({
num: state => state.num
})
Mutations
中文 '变化' ， 因为Vuex 是单向数据流 所以只能通过Mutations 来改变 状态
const mutations = {
SETNUM(state) {
state.num++;
},
SUBNUM(state) {
state.num--;
},
ADDNUM(state,n) {
state.num+=n
}
}
使用方法 1.直接使用 2.使用vuex提供的语法糖直接映射到methods 上
1.this.$store.commit('mutationName')
2. methods: {
...mapMutations([
'SUBNUM',
'ADDNUM'
]),
}
// template
<el-button type="info" @click="SUBNUM">-1</el-button>
mutation 是可以接受参数的
ADDNUM(state,n) {
state.num+=n
}
在组件中使用
this.ADDNUM(parseInt(this.addnum))
Actions
可以用于改变状态，不过是通过触发mutation实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似，也是绑定在组件的methods上的。
使用方法
1.this.$store.dispatch(actionName)
2.import {mapActions} from 'vuex'
export default {
methods: mapActions([
'actionName',
])
}
Getters
有些状态需要做二次处理，就可以使用getters。
const getters = {
strleng: state =>state.str.length
}
import {mapGetters} from 'vuex'
export default {
computed: mapGetters([
'strLength'
])
//或
getStrLenght() {
return this.$store.getters.strleng
},
}
