在Mvc模式大行其道的今天，后端通过各种Mvc框架实现视图与数据模型的隔离，而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定，使其视图的更新影响模型，模型的更新影响视图，你会不会觉得这就是Mvc库呢，实则不然，因为他还差一个重要的C(也就是控制器)。以下是鄙人对Mvc的个人理解，如有失误还请各位道友指正。

• M：模型用于表示各种事物及事物特性的数据
• v：view + viewModel，此处鄙人认为v不能单纯的理解为视图，而应该是视图+视图模型。
• c：控制器，用于协调M与v之间的关系。

第一部分：我对vuex的理解

这个重要的C是谁呢，鄙人认为就是此文章要介绍的Vuex。如此理解也是可以的：vue + vuex = 前端mvc框架

flux(单向数据流)

• actions：一个动作，可以是view创建的，也可以是程序其他逻辑创建的
• dispatcher：将业务逻辑与用户界面分离，负责响应action动作事件，并意向传遍整个系统
• store：业务逻辑处理
• view：视图

vuex是借鉴了flux、redux、The Elm Architecture等相关思想。

第二部分：揭开vuex面纱

本示例实现为一个输入框动态向下拉列表增加选择项的功能源码下载地址，先看效果图：

为了展示vuex的作用，此示例你可以看到如下内容：

• 两个局部组件：输入和下拉列表组件
• 一个全局组件：App，也是整个Vue实例的顶级组件
• 一个jquery.js和bootstrap.js，用于实例下拉组件，jquery只辅助用于bootstrap。
• 还有一个bootstrap.css，用于美化样式。

一、实现vuex的store实例

//Vue.use(Vuex);//如果是window引入方式，vuex会自动附加到Vue上。
var state = {
 list: [{"id":1, "name": "001"}]
};
var mutations = {
 ADDITEM: function(argState, item){
 argState.list.push(item);
 }
};
var getters = {
 getList:function(argState){
 return argState.list;
 }
}
var actions = {
 addItem:function(dis,item){
 dis.commit('ADDITEM',item);
 }
}
var _storeObj = new Vuex.Store({
 "state": state,
 "mutations": mutations,
 "getters": getters,
 "actions": actions
});

vuex更新数据流程：

• dispatch可以是view视图中触发，也可以是程序业务逻辑来触发
• actions通过commit方法发出一个改变事件
• mutations中具体操作state的改变
• state的改变通过getter暴露给view，state改变后会立即通知用getter关联起来的view。
• 创建一个Vuex.Store的实例，用于Vue实例。

二、实现vue的组件

var inputComp = {
 render:function(createElement){
 var self = this; 
 return createElement('div',{
 attrs:{
 "data-id": "001"
 },
 class:{
 "form-inline":true
 },
 style:{
 "display": "inline-block"
 }
 },[createElement('input',{
 attrs:{
 type: 'text'
 },
 class:{
 "form-control": true
 },
 domProps:{
 value: self.value
 },
 on:{
 input:function(event){
  self.value = event.target.value;
 }
 } 
 }),createElement('button',{
 on:{
 "click": function(event){
  self.$store.dispatch('addItem',{"id":2,"name": self.value});
 }
 },
 class:{
 "btn":true,
 "btn-primary": true
 },
 domProps:{
 type: 'button'
 }
 },"添加")]);
 }
};
//下拉列表组件
var ComboComp = {
 render:function(createElement){ 
 var self = this;
 return createElement("div",{
 attrs:{
 "data-id": "ComboComp"
 },
 class:{
 "dropdown":true
 },
 style:{
 "display": "inline-block"
 }
 },[
 createElement("button",{
 class:{
  "btn": true,
  "btn-default": true,
  "dropdown-toggle": true
 },
 attrs:{
  "type": "button",
  "id": "dr02",
  "data-toggle": "dropdown"
 }
 },[ createElement("span", "选择"), createElement("span",{
 class:{
  "caret":true
 }
 })])
 ,
 createElement("ul",
 {
 class:{
  "dropdown-menu":true
 },
 attrs:{
  "aria-labelledby":"dr02"
 }
 }, self.$store.getters["getList"].map(function(item){
 return createElement("li",item.name);
 }))
 ])
 }
};
Vue.component('App',{
 template:'<div class="wrap" ><ComboComp></ComboComp> <InputComp></InputComp></div>',
 components:{
 "InputComp": inputComp,
 "ComboComp": ComboComp
 }
});

1.inputComp(局部组件)：提供输入

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

3.App(全局组件)：顶级组件，组合inputComp和ComboComp组件。

4.组件参数说明：

render：返回一个组件，其中包含视图，data等。this为vue实例，参数是createElement方法，用于创建VNode。

5.重点关注inputComp组件中button子元素的on中的click方法，内部用dispatch触发了store中对应Id的actions。

createElement('button',{
on:{
 "click": function(event){
 self.$store.dispatch('addItem',{"id":2,"name": self.value});
 }
}

三、输出

html部分代码：

<div class="wrap" id="app">
 <App></App>
</div>

js部分代码：

var _vue = new Vue({
 el: '#app',
 store: _storeObj
});

• 视图中引入了App这个全局组件
• 生成Vue实例的时候将vuex中创建的store实例传递进去。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# Vuex  # 写给新手同学的vuex快速上手指北小结  # 道友  # 你可以  # 你会  # 下载地址  # 这就是  # 如有  # 我对  # 大行其道  # 还有一个  # 使其  # 一个重要  # 后会  # 绑定  # 创建一个  # 还请  # 先看  # 第一部分  # 第二部分  # 还差  # 重点关注 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 使用C语言编写圣诞表白程序  如何快速启动建站代理加盟业务？  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  Swift中循环语句中的转移语句 break 和 continue  Laravel如何集成第三方登录_Laravel Socialite实现微信QQ微博登录  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  怎么用AI帮你设计一套个性化的手机App图标？  BootStrap整体框架之基础布局组件  如何快速生成可下载的建站源码工具？  如何正确下载安装西数主机建站助手？  北京的网站制作公司有哪些,哪个视频网站最好？  如何快速建站并高效导出源代码？  Python正则表达式进阶教程_复杂匹配与分组替换解析  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  微信小程序 五星评分(包括半颗星评分)实例代码  Win11关机界面怎么改_Win11自定义关机画面设置【工具】  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  如何在Tomcat中配置并部署网站项目？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  JS中对数组元素进行增删改移的方法总结  Laravel如何实现数据库事务？（DB Facade示例）  如何快速上传自定义模板至建站之星？  如何生成腾讯云建站专用兑换码？  如何在IIS中新建站点并配置端口与物理路径？  Internet Explorer官网直接进入 IE浏览器在线体验版网址  Laravel如何保护应用免受CSRF攻击？（原理和示例）  昵图网官方站入口 昵图网素材图库官网入口  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  黑客如何通过漏洞一步步攻陷网站服务器？  Laravel如何使用Sanctum进行API认证？（SPA实战）  英语简历制作免费网站推荐,如何将简历翻译成英文？  高防服务器如何保障网站安全无虞？  SQL查询语句优化的实用方法总结  iOS正则表达式验证手机号、邮箱、身份证号等  在线教育网站制作平台,山西立德教育官网？  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  焦点电影公司作品,电影焦点结局是什么？  Laravel如何实现一对一模型关联？（Eloquent示例）  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  千库网官网入口推荐 千库网设计创意平台入口  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  标题：Vue + Vuex 项目中正确使用 JWT 进行身份认证的实践指南  怎么用AI帮你为初创公司进行市场定位分析？  如何快速搭建高效可靠的建站解决方案？  Laravel如何实现API版本控制_Laravel版本化API设计方案  长沙做网站要多少钱,长沙国安网络怎么样？  如何在IIS7上新建站点并设置安全权限？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？