如果你之前使用过vue.js，你一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新
学习Vuex, 一定要看懂官网的这张图
image.png
我们从Vue Components开始简单过一遍这个图
- 在Vue Components中, 我们执行dispatch操作调用Actions中定义的方法
- Actions中的方法执行commit操作调用Mutations的方法
- Mutations可以直接操作State里面的值
- State中保存我们的状态值, State中的值一旦发生变化,就会重新渲染(Render)和它关联的Vue Components, 走到这里正好走了一个圈
除此之外, 图中我们还有两个地方没有提到, 那就是Backend API和Devtools
- 先说下Backend API
翻译成中文就是后台Api, 难道我们要在这里对接后台的接口, 是的, 就是这个意思, 在Actions和Backend API中间是一条虚线, 官方的意思并不强制要求我们去这么做, 但是建议我们在Actions中去调用我们封装好的后台接口请求文件, 这样的好处就是在Vue页面中我们不用再去写任何api请求的代码了, 把注意力全放到和Vuex的交互上来 - Devtools
Vue官方为我们提供的Vuex状态调试工具, 它能跟踪到Vuex的每一个操作和状态改变
最后一个知识点, Mutations可以省略吗?
可以省略, 省略我们直接使用Actions操作State, 但是不建议,我们在图中也看到了, 在Mutations的地方对接了Devtools，如果去掉了Mutations我们就无法使用Devtools的调试了, 另外还有就是如果我们的状态值变的很多的时候, Actions和Mutations可以分层调用的作用, 类似Java或Php中的Service层和Model层, Mutations层的代码可能会被Actions重复调用, 起到代码复用的效果
好了, 今天就先大概介绍这么多
上篇文章我们介绍了Vuex是什么, 本文我们主要介绍Vuex中的State
什么是State?
State就是Vuex保存数据的地方
让State中的状态和Vue Components中的属性关联
1. 在store定义一个状态count默认为0
const store = new Vuex.Store({
state: {
count : 0
}
})
2. 使组件中的count和状态count关联上
// 方式1
// 组件的值和状态值绑定, 状态值改变, 组件中定义的值也跟着改变
export default {
data() {
return {
count: this.$store.state.count
}
}
}
// 方式2. 通过辅助函数关联, 效果和方式1一致
import { mapState } from 'vuex'
data(){
// 这里无需写count: 0
},
computed: {
...mapState(['count']),
}
注: 使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态
Vuex中的Getter是干什么的?
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数, 这个时候我们就需要用到Getter了
在Getter中定义方法对列表进行过滤
- getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
// 只返回done为true的列表
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
// 返回一个函数
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
})
获取Getter中的数据
- 通过属性获取
this.$store.getters.doneTodos;
- 通过方法
this.$store.getters.getTodoById(1);
辅助函数
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodos',
'getTodoById',
// ...
])
}
}
网友评论