vuex学习
- 总之vuex的方法不多,下面只总结一下需要用到的
- state 状态 就是数据源
- getter 就是相当于一个计算属性 根据传过来的state去获取数据
- 最主要的是改变状态,改变状态又分为两步 :
1是获取数据 即是通过方法行为去获取 即使actions,去执行一些操作去更改或获取数据,然后调用mutation中的方法去把对应的状态与数据传递过去
2是把从actions传过来的状态在mutations中就行更改
state 访问状态对象
- 可以当成是固定的参数,用来生成返给页面使用的根据
获取state的三种办法 - 1通过computed属性去获取(不好 还要一个个去获取)
computed: {
count() {
return this.$store.state.count;
}
}
- 2通过vuex自带的方法mapState 还是写在computed里面
computed: mapState({
count: state => state.count //传入state,返回state.count
// 大概就是 count = state.count
})
- 3通过mapState数组去赋值(最方便)
computed: mapState(["count"])
- 4 我觉得还是这种语法比较好,自己去映射
computed: {
// 映射State
...mapState([
'hotProducts'
])
},
getter 获取处理后数据
- getter主要是过去处理state后的数据,也类似于方法, 就是把state里面的数据传过来,然后getter里面的方法去处理后返回.也就是一个再加工再过滤的过程
- 定义
const getters = {
count: function(state) {
return state.count += 100
},
// 箭头函数定义
isShowSearchBar:state=>stateisShowSearchBar
}
- 使用通过store对象去获取 都一样,喜欢第一种
computed: {
...mapState(["count"]),
count() {
return this.$store.getters.count
}
}
actions 异步修改状态或者就是获取数据
- 其实这里就是一个个的方法,就是获取数据,把数据当成参数去调用mutations去改变数据
const actions = {
//上下文对象 context就相当于store
addAction(context) {
context.commit('add', 10)
},
//直接把commit对象传过来用
reduceAction({commit}) {
commit('reduce')
}
}
- 这里还要提到一个方法,是用来把action的方法放到页面里直接去调用的
methods:{
...mapActions(['getHotProducts'])
}
mutations 提交改变状态
- 调用改变状态
const mutation = {
add(state, n) {
state.count += n
},
reduce(state) {
state.count -= 1
}
}
mutatins-types
- 就是相当于统一命名一样 方法状态库
自己想的 如果有错误 欢迎指出