如何快速开始使用Vuex

如今，随着Mvc模式的普及，后端通过各种Mvc框架实现了视图和数据模型的分离，而前端也发展迅速。Vue实现了Dom和viewModel之间的双向绑定，使其视图的更新影响模型，模型的更新影响视图。你以为这是Mvc库，其实不是，因为还缺一个重要的C(即控制器)？以下是我个人对Mvc的理解。如果有任何错误，请纠正我。

m:模型用于表示各种事物的数据及其特征v: viewviewmodel。我认为v不能简单地理解为一种观点，而是一种观点观点模型。c:协调m和v之间关系的控制器.第一部分：我对vuex的理解

这个重要的C是谁？我想这篇文章要介绍的就是Vuex。也可以这样理解：vue vuex=前端mvc框架

流量(单向数据流)

动作：一个动作，可以由视图创建，也可以由程序的其他逻辑创建。它将业务逻辑从用户界面中分离出来，负责响应动作事件，并打算在整个系统中传播。store:业务逻辑句柄视图：view vuex指flux、redux、The Elm Architecture等相关思想。

第二部分：揭开vuex面纱

此示例实现为一个输入框，用于将所选项目的函数源代码的下载地址动态添加到下拉列表中。先看渲染：

为了展示vuex的作用，您可以在此示例中看到以下内容：

有两个本地组件：输入和下拉列表组件，一个全局组件：App，它也是整个Vue实例的顶层组件。jquery.js和bootstrap.js用于实例下拉组件，jquery只用于bootstrap。还有一个bootstrap.css来美化风格。1.用于实现vuex的存储实例

//Vue . use(Vuex)；//如果是窗口介绍，Vuex会自动附加到vue上。var state={ list :[{ ' id ' :1，' name ' : ' 001 ' }]}；var突变={ additem : function(arg state，item){ arg state . list . push(item)；}};var getter s={ GetList : FuncTion(ArgState){ return ArgState . list；} } var actions={ ADDITEM : function(dis，item){ dis.commit('ADDITEM '，item)；}}var _storeObj=new Vuex。Store({ 'state': state，'突变' :突变，' getters ' : getters，' actions ' : actions })；Vuex更新数据流：

调度可以在视图中触发，也可以由程序业务逻辑触发，通过提交方法触发发送变更事件的动作。突变中特定操作状态的变化通过getter暴露给视图，状态变化后将立即通知与getter关联的视图。创建Vuex的一个实例。Vue实例的存储。二、实现vue的组件

var inputComp={ render : function(create element){ var self=this；返回createElement('div '，{ attrs : { ' data-id ' : ' 001 ' }，class : { ' form-inline ' : true }，style : { ' display ' : ' inline-block ' } }，[createElement('input '，{ attrs:{ type: 'text' }，class 33: { ' form-control ' 33333366$store.dispatch('addItem '，{'id':2，' name ' : self。value })；} }，class:{ 'btn':true，' btn-primary': true }，DOM props 3360 { type : ' button ' }，'添加')]);}};//下拉列表组件var combo camp={ render : function(create element){ var self=this；返回createElement('div '，{ attrs : { ' data-id ' : ' combo camp ' }，class : { ' drop down ' : true }，style : { ' display ' : ' inline-block ' } }，[ createElement('button '，{ class: { ' btn ' : true，' BTN-default ' 3: true，' down-toggle ' 333333330选择)，createElement('span '，{ class:{ ' caret ' : true } })]，createElement('ul '，{ class : { '下拉菜单： true }，attrs : { ' aria-labelledby ' : ' dr02 ' })，self .$商店。getter[' GetList '].map(function(item){ return CreateElement(' Li ')，item。姓名)；})) ]) }};Vue.component('App '，{ template : ' div class=' wrap ' combo camp/combo camp input compap/div '，components 3360 { ' input compap ' : input compap，' combo camp ' : combo camp } })；1.inputComp(局部组件):提供输入

2.ComboComp(局部组件):实现列表内容的展示

3.App(全局组件):顶级组件，组合输入公司和ComboComp组件。

4.组件参数说明：

渲染：返回一个组件，其中包含视图，数据等这个。为某视频剪辑软件实例，参数是createElement方法，用于创建VNode。

5.重点关注输入公司组件中按钮子元素的在中的点击方法，内部用派遣触发了商店中对应身份的行动。

createElement('button '，{ : { ' click ' : function(event){ self .$store.dispatch('addItem '，{'id':2，' name ' : self。value })；}}三、输出

超文本标记语言部分代码：

div class=' wrap ' id=' App ' App/App/div js部分代码：

var _vue=new Vue({ el: '#app '，store : _ store obj })；视图中引入了应用这个全局组件生成某视频剪辑软件实例的时候将vuex中创建的商店实例传递进去。以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！