Vuex详解

您所在的位置:网站首页 数据拦截教程 Vuex详解

Vuex详解

2023-06-09 20:58| 来源: 网络整理| 查看: 265

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