之前写Vue的时候没有用到Vuex, 平时都是在methods里面写写方法调调接口之类的,Vuex适合组件多处引用,并频繁统一更新的场景,比如电商购物车之类的(个人理解). 学习了几天对Vuex有了初步的了解,下面跟大家分享一下.
前提: 安装vue-cli, 初始化项目已经完成
说明: 我只分享自己感觉舒服的做法 多种实现方式就不介绍了
复制代码
NPM安装
npm install vuex --save
复制代码
在main.js中引入
import Vuex from 'vuex'
Vue.use(Vuex)
复制代码
创建store
const store = new Vuex.Store({
state: {
count: 0
}
})
复制代码
注入到Vue实例中, 在其他页面可以通过this.$store获取
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
复制代码
State
Vuex的数据源,我把它理解成我们平时页面中的data属性,
那么如何在Vue组件中获取Vuex的状态呢?我们来看一个例子.
复制代码
Vuex的存储状态是响应式的所以我们在组件的计算属性computed中来获取.
computed: {
count() {
return this.$store.state.count
}
}
复制代码
在页面上创建一个div我们来做一下绑定看效果
<div> state中的count: {{ count }}</div>
复制代码
效果如下:
mapState 辅助函数
当组件中存在多个状态时,全部声明为计算属性很冗杂,我们可以使用mapState来解决.
复制代码
import { mapState } from 'vuex'
export default {
name: "HelloWorld",
computed: {
...mapState({
// 箭头函数可使代码更简练
count: state => state.count
})
}
};
复制代码
Getter
store的计算属性,getter的返回值会根据它的依赖被缓存起来,
且只有当它的依赖值发生了改变才会被重新计算.
复制代码
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, done: true },
{ id: 2, done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
复制代码
在组件中获取getters
computed: {
doneTodos() {
return this.$store.getters.doneTodos
}
}
复制代码
页面标签绑定
<div> getters中的doneTodos: {{ doneTodos }}</div>
复制代码
效果如下:
mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
复制代码
import { mapGetters } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters({
doneTodos: 'doneTodos'
})
}
}
复制代码
下次介绍store中状态改变的方法Mutation 和 Action ,谢谢...