专栏首页前端技术开发vuex详细介绍和使用方法

vuex详细介绍和使用方法

1.什么是vuex?

官方的解释: Vuex是一个专为Vue.js应用程序开发的状态管理模式

当项目比较庞大的时候,每个组件的状态比较多,为了方便管理,需要把组件中的状态抽取出来,放入Vuex中进行统一管理。常用的登录,购物车等一下数据的存储

State:唯一的数据源,我们需要把任何一个组件中需要抽取出来的变量放入到state中去

Getters:通过Getters可以派生出一些新的状态

Mutations:更改Vuex的store中的状态的唯一方法时提交mutation

Actions:Action提交的是mutation,而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。

操作步骤: 当组件中的状态发生改变,通过dispatch函数提交到Action,Actions再通过Commit函数提交到Mutations, 此时,状态发生改变都会实时的去渲染组件。

在线文档:

https://github.com/vuejs/vuex

https://vuex.vuejs.org/zh/

项目中如何使用vuex

在我们的项目中,安装vuex

cnpm install vuex --save

在src目录中,创建store文件,并创建vuex中模块的文件名,每一个都单独拆分开,便于管理模块。

然后在你的main.js文件引入

在你的index.js相当于vuex的主目录,文件都在index.js文件引入

state文件定义所有的状态,

mutation-types用于定义action和mutation变量,便于统一管理,

定义的状态可以在浏览器看到我们定义的变量

action 提交的是 mutation,而不是直接变更状态。

mutation提交更改state的唯一的状态

 getters派发state的状态值,通过计算属性获取值。在任何一个组件都可以或获取到你在state存储的数据信息

 在组件中使用。setUser就是在action定义的提交mutation的放,decode要提交的数据

this.$store.dispatch("setUser", decode);

只要写好一个,其他的套路都是一样的,主要的就是action提交大mutations,然后mutations去更改state里面的状态。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据。今天经过总结,解决了这个...

    小周sri的码农
  • 这次彻底理解了Object这个属性

    实例化Object对象的方式有两种:使用Object构造器和使用对象的字面量。例如:

    小周sri的码农
  • uni-app实现多端开发

    多端开发,听名字就感觉不一样,一套代码。多端使用,适用于各个平台。市面上很多关于多端开发的框架,比较常用,流行的框架 uni-app,Chameleon(变色龙...

    小周sri的码农
  • 在CVM搭建你自己的网盘

    Nextcloud是ownCloud的一个分支,它是一个文件共享服务器,允许您将个人内容(如文档和图片)存储在集中位置,就像腾讯微云、百度网盘、Dropbox一...

    大瓜皮
  • 使用Kafka在生产环境中构建和部署可扩展的机器学习

    用户1263954
  • 如何在Debian 9上安装和配置Nextcloud

    Nextcloud是ownCloud的一个分支,它是一个文件共享服务器,允许您将个人内容(如文档和图片)存储在集中位置,就像Dropbox一样。与Nextclo...

    独钓寒江雪_Ly
  • Java并发编程--CountDownLatch

      CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行。

    在周末
  • 这是 隐马尔科夫模型(HMM) 的 2 个基本假设

    上一篇 1个例子解释 隐马尔科夫模型(HMM) 的 5 个基本要素 说了隐马尔可夫模型 (HMM) 的参数,细分的话,包括 5 个基本要素:

    double
  • Pytorch 1.1.0驾到!小升级大变动,易用性更强,支持自定义RNN

    Pytorch添加的一个新特性是更好地支持带有TorchScript (PyTorch JIT)的快速自定义递归神经网络(fastrnns)。

    新智元
  • 架构之技术复杂度与业务复杂度 原

        今天给自己提出一个问题,如何在项目代码中,如何将技术复杂度与业务复杂度分开,我以前从未想过这个问题,直到看到张逸的领域驱动设计。

    克虏伯

扫码关注云+社区

领取腾讯云代金券