Vuex详解 |
您所在的位置:网站首页 › 数据拦截教程 › Vuex详解 |
Vuex 是什么?
官网解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 组件之间的传值有哪些?有父子通讯,兄弟组件通讯......但是传参对于多层嵌套就显得非常繁琐,代码维护也会非常麻烦。因此vuex就是把组件共享状态抽取出来以一个全局单例模式管理,把共享的数据函数放进vuex中,任何组件都可以进行使用。 什么时候我们该使用它?答案是:需要共享状态或数据的时候。 安装方式Yarn、npm或自己构建使用NPM命令 npm install vuex@next --save使用Yarn命令 yarn add vuex@next --save自己构建 git clone https://github.com/vuejs/vuex.git node_modules/vuex cd node_modules/vuex yarn yarn build 五个变量解释1、 state 提供唯一的公共数据源,有共享的数据统一放到store的state进行储存,相似与data。 在vuex中state中定义数据,可以在任何组件中进行调用。 2、getter 类似于vue中的computed,进行缓存,对于Store中的数据进行加工处理形成新的数据
3、Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数: 4、Action Action和Mutation相似,一般不用Mutation 异步操作,若要进行异步操作,使用Action 原因:为了方便devtools打个快照存下来,方便管理维护。所以说这个只是规范,而不是逻辑的不允许,只是为了让这个工具能够追踪数据变化而已 5、Modules 当遇见大型项目时,数据量大,store就会显得很臃肿 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 vuex中store存储 store.commit和store.dispatch的区别及用法 // 以载荷形式 store.commit('increment',{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 //这是额外的参数 })主要区别: 1、dispatch:含有异步操作,数据提交至 actions ,可用于向后台提交数据 写法示例: this.$store.dispatch('isLogin', true); 2、commit:同步操作,数据提交至 mutations ,可用于登录成功后读取用户信息写到缓存里 写法示例: this.$store.commit('loginStatus', 1); 两者都可以以载荷形式或者对象风格的方式进行提交 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |