Vuex中的核心方法 Vuex是一个专为Vue.js应用程序开发的状态管理模式,其采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是
Vuex中的核心方法
-
state
: 基本数据。
-
getters
: 从基本数据派生的数据。
-
mutations
: 提交更改数据的方法,同步操作。
-
actions
: 像一个装饰器,包裹mutations
,使之可以异步。
-
modules
: 模块化Vuex
。
单一状态树
在Vue组件中获得Vuex状态
const store = new Vuex.Store({
state: {
count: 0
}
})
const vm = new Vue({
//..
store,computed: {
count: function(){
return this.$store.state.count
}
},//..
})
mapState辅助函数
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from "vuex";
export default {
// ...
computed: mapState({
// 箭头函数
count: state => state.count,// 传字符串参数 count 等同于 state => state.count
countAlias: 'count',// 使用 this
countPlusLocalState: function(state) {
return state.count + this.localCount;
}
})
// ...
}
import { mapState } from "vuex";
export default {
// ...
computed: {
localComputed: function() { /* ... */ },// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
// ...
}
https://github.com/WindrunnerMax/EveryDay
https://vuex.vuejs.org/zh/
https://www.jianshu.com/p/1fdf9518cbdf
https://www.jianshu.com/p/29467543f77a
https://juejin.cn/post/6844903624137523213
https://segmentfault.com/a/1190000024371223
https://github.com/Hibop/Hibop.github.io/issues/45