怎么使用vuex管理状态仓库-创新互联

这篇文章主要为大家展示了怎么使用vuex管理状态仓库，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

创新互联建站是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的10余年时间我们累计服务了上千家以及全国政企客户，如成都PVC花箱等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞扬。

一.什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。采用了全局单例模式，将组件的共享状态抽离出来管理，使得组件树中每一个位置都可以获取共享的状态或者触发行为。

那么什么是状态呢？我把状态理解为在没有使用vuex时，在当前组件中data内需要共用的数据为状态。

vuex使得状态或行为成为了共享的状态，所共享的状态或行为可以在各个组件中都可以访问到，省去了子父或子子之间传递变量，提高了开发效率。

二.不使用vuex时与使用vuex时的差别

当我们不使用vuex时，对于组件之间传递信息会较为麻烦。

不使用vuex时父子之间传递信息：

App.vue文件中：

<template>
 <div id="app">
   <Fruits :fruitList="fruitList"/>
 </div>
</template> 
<script>
import Goods from './components/Goods';
export default {
 name: 'App',
 components:{
  Fruits,
  Goods
 },
 data(){
  return{
   goodList:[
   {
    name:'doll',
    price:12
   },
   {
    name:'glass',
    price:10
   }
  ],
  }
 }
}
</script>
<style>
</style>

名称栏目：怎么使用vuex管理状态仓库-创新互联
本文URL：https://www.cdcxhl.com/article26/eejcg.html

成都网站建设公司_创新互联，为您提供网站内链、外贸建站、App设计、定制开发、网站导航、网页设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联