Vuex实现数据共享的方法
47 浏览量
2020-11-28
12:09:16
上传
评论
收藏 75KB PDF 举报
Vuex实现数据共享的方法实现数据共享的方法
在用vue作为前端框架进行开发的时候，对于组件间的传值你一定不会陌生，如果只是简单的父子组件传值，我想你肯定不会
选择用Vuex来进行状态管理，但是如果你需要构建一个中大型单页应用，组件间数据交互比较复杂频繁，你很可能会考虑如
何更好地在组件外部管理状态，那么Vuex 将会成为自然而然的选择。
Vuex 是什么？是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证
状态以一种可预测的方式发生变化。 这是官方的一种说法。
用个人的话总结下： Vuex就是为了实现多组件数据共享，从而建立一个叫store的数据管理库，将需要共享的数据存放在里
面，在需要的地方可以取出来作为初始数据，也可以在组件内通过dispatch或者提交commit方法来改变该原始数据状态，从而
实现的data的共享。
Vuex的核心的核心
1、 State
Vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过this.$store.state来获取我们定义的数据。
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
number: 0
}
export default new Vuex.Store({
state,
});
在页面中通过this.$store.state.number 即可获取到当前的值。
2、Getter
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖
被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
number: 0
}
const getters = {
getNumber(state) {
return state.number + 1
}
}
export default new Vuex.Store({
state,
getters,
});
在页面你可以用两种方式取到getters里面的值
1、通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值 如： this.$store.getters.getNumber
Getter 也可以接受其他 getter 作为第二个参数：
资源评论
