在Vue的项目中，如果项目简单，父组件和子组件之间的数据传输可以通过props或$emit来实现

但是在大中型项目中，往往需要在不相关的并行组件之间传递数据，很多数据需要被多个组件回收。此时使用上述方法会使项目代码冗长，不利于组件的复用，提高耦合度。

Vue的状态管理工具Vuex完美的解决了这个问题。

看了vuex的官网，感觉不太好理解。有时候我们只需要从一个组件中动态获取数据(官网称之为“组件级”:它是一个独立的控件，作用范围只在组件内部)，然后我们想把它放到官网称之为“应用层”的地方(可以在项目中的任何地方获取和动态修改，修改后vue会更新你的整个项目)。这就是我第一次来学vue的原因。我不想做前端数据结构库。

让我们一步步来看看我的小例子

首先，安装vuex。目前公司项目已经从vue1.0迁移到vue2.0，并下载安装了vue

Npm安装vuex - save，然后在index.html创建一个相同级别的新文件夹存储，并在文件夹中创建一个新的index.js文件，我们用它来组装模块和导出存储的文件

[1.获取商店中的数据]

从' vue '导入vue从' vuex'/导入vuex/告诉vue“使用”vuexVue.use(Vuex)//创建一个对象保存应用程序启动时的初始状态//维护状态const store=new Vuex . store({ state : }//设置全局初始值bankinf3360 {'name' : '我是Vuex的第一个数据'，' id':100，BankName': '中国银行' }}//此时，这个存储可以连接到我们的应用程序，导出默认存储，并在vue根文件中注册存储，这样所有组件都可以使用存储中的数据。

我的项目文件结构：

在main.js文件中注册存储

从“vue”导入Vue从“App”导入。/App“从导入路由器”。/router“从导入存储”。/./store/index '/* eslint-disable no-new */new vue({ El : ' # app '，路由器，商店，template3360' app/'，components: { app } })的第一个简单步骤完成。您可以在任何组件中使用存储中的数据，使用方法也非常简单，即使用计算属性将存储中的数据返回到新属性，然后在您的模板中使用它。

在任何组件中：

导出默认值{.computed: { bankName() {返回此。$ store . state . BaNKInf . BaNKname；}},}可以直接使用模板中的属性bankName，即商店中的中国银行

[2.修改组件中存储的状态]

向任何组件添加html模板

div class=' bank ' list-header : header data=' bank name '/list-header 04 bank details页面输入名称v-model=' text value '按钮类型=' button' name=' get data' @单击=' new bank name '/按钮/div，然后提交组件中的突变

导出默认值{.computed: { bankName() {返回此。$ store . state . BaNKInf . BaNKname；}}，methods : { new bank name 3360 function(){ this。$ store.submit ('newbankname '，this.textvalue)}}.}在商店中添加index.js突变：

const store=new vuex . store({ state : {//设置初始状态app启动时的全局初始值Bank INF 3360 { ' name ' : '我是vuex的第一个数据'，' id':100，' bankName': '中国银行' }。count:0 }，突变： { newBankName(state，msg){ state . BaNKInf . BaNKname=msg；}}})这样，你发现当你点击提交按钮的时候，页面已经显示了你修改过的数据，并且这个组件被重用的地方的所有数据都已经被vue更新了；

如果你找到这个。$ store.submit不是正在使用的函数，请打开项目的配置文件package.json，并检查正在使用的vuex版本。我正在使用vuex2.0。

如果您想删除旧版本的vuex并安装新版本的vuex，请使用

NPM rmvuex-保存并安装最新的vuex

Npm安装vuex - save可以解决这个错误，或者查看vuex官网api修改提交突变的声明

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。