vue笔记

vue

vue起步

在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id,data 用于定义属性，实例中有三个属性分别为：site、url、alexa。methods 用于定义的函数，可以通过 return 来返回函数值。{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

Vue.js 模板语法

HTML 属性中的值应使用 v-bind 指令。

v-if 指令根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>        
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

v-on 指令，它用于监听 DOM 事件

v-on 可以接收一个定义的方法来调用。
    <div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
 
<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})

 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
    可以用内联 JavaScript 语句：
          <div id="app">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
     
    <script>
    new Vue({
      el: '#app',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })
    </script>

事件修饰符：

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
 .stop - 阻止冒泡
 .prevent - 阻止默认事件
 .capture - 阻止捕获
 .self - 只监听触发该元素的事件
 .once - 只触发一次
 .left - 左键事件
 .right - 右键事件
 .middle - 中间滚轮事件
 <!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

   <div id="app">
   <p>{{ message }}</p>
   <input v-model="message">
   </div>
       
   <script>
   new Vue({
     el: '#app',
     data: {
       message: 'Runoob!'
     }
   })
   </script>

   v-model 修饰符
语法：v-model.修饰符=”变量” 《=》v-model.lazy="aaa"
 lazy，       文本框失去焦点后再去更新数据
 number，当输入数字时，字符串类型将自动转换为number（先输数字，截取前面的数字返回）
 trim，       删除文本框中的前后空格

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

Vue.js 计算属性

计算属性关键词: computed。、
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子：
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
使用了计算属性的实例：  
    <div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

过滤器

​	过滤器，就是将数据被渲染到视图之前进行格式化处理，而不会修改作用域中原有的数据
原则是：左值右量（变量也可以不写）
语法：  **定义过滤器（全局过滤器** **局部过滤器）**
​		filters:{
​      	过滤器1:function(参数1,参数2…){}
     或
​		过滤器2 (参数1,参数2…){}   
​		}
​		Vue.filter()
说明：定义过滤器时，必须声明参数，并且参数1是固定的，指的是要操作的数据，剩余的参数是调用过滤器时传递进来的

           **代码演示：**

<div id="app">
    <dl>
        <dt>{{product.name}}</dt>
        <dd>{{product.price|toprice('$')|tejia}}</dd>
      </dl>
</div>
<script>

Vue.js 样式绑定

class 属性绑定：

 我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
     <style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>

我们也可以直接绑定数据里的一个对象：
<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>

我们可以把一个数组传给 v-bind:class ，实例如下：
<div v-bind:class="[activeClass, errorClass]"></div>

还可以使用三元表达式来切换列表中的 class ：
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

Vue.js style(内联样式)

写法同class 属性绑定   

Vue.js 组件

注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

全局组件实例

注册一个简单的全局组件 runoob，并使用它：
<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

局部组件实例

注册一个简单的局部组件 runoob，并使用它：

<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

Prop 实例
<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

    动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数    据变化时，该变化也会传导给子组件：
<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

Prop 验证

组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器：

String
Number
Boolean
Array
Object
Date
Function
Symbol
type 也可以是一个自定义构造器，使用 instanceof 检测。

vue自定义指令

添加一个自定义指令，有两种方式：

 通过 Vue.directive() 函数注册一个全局的指令。
 通过组件的 directives 属性，对该组件添加一个局部的指令。
创建全局指令：

需要传入指令名称以及一个包含指令钩子函数的对象，该对象的键即钩子函数的函数名，值即函数体，钩子函数可以有多个。

Vue.directive('self_defined_name',{
  bind:function(el,binding){
  //do someting
  },
  inserted: function(el,binding){
  //do something
  },
}
创建局部指令：

直接向创建的 Vue 实例的 directives 字典属性添加键值对，键值对即需要添加的自定义指令及对应钩子函数字典对象。键值    对可以有多个，对应多个自定义指令。

new Vue({
  el:'#app',
  directives:{
    self_defined_name1:{
        bind:function(el,binding){
          //do something
        }
        inserted:function(el,binding){
                  //do something
        },
     }

    self_defined_name2:{
        bind:function(el,binding){
          //do something
        }
        inserted:function(el,binding){
                  //do something
        },
     }
  }

})  

Vue传值

1.父传子 
简单描述
父组件是通过props属性给子组件通信的
数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告）

实现步骤
1.子组件在props中创建一个属性，用于接收父组件传过来的值；
2.父组件 引入子组件–>注册子组件–>引用子组件；
3.在子组件标签中添加子组件props中创建的属性；
4.将所要传递的值赋值给该属性。

props接收的几种写法
1.直接使用 props 以一维数组的方式接收
props: ['childCom']

2.接收字符串

props: {
    childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦
}

3.使用对象形式接收，并赋予默认值，但是在数组这里接收有问题，一个大坑，请看第四种

props: {
    childCom: {
        type: String,
        default: 'sichaoyun' 
    }
}

4.第三种写法：接收数组，是需要以函数形式接收

 props: {
    minetlist: {
      type: Array,
      default: function () {
        return []
      }
    }
  }

 Ø  type，类型约束，约束父组件给子组件传递的数据类型，类型可以是：Object、Array、
  Number、String、Boolean
 
 Ø  default，指定默认值，如果父组件没有传递数据，可以指定默认值
 
 Ø  required，指定该数据项是否必须传递

This.$parent.数据（父组件中的数据名） (可以对父组件的数据进行操作)

子传父具体实现步骤

1.父组件通过$on监听事件，事件处理函数的参数则为接收的数据
2.子组件通过$emit可以触发事件，
3.第一个参数为要触发的事件，第二个事件为要传递的数据
4.sync修饰符：对一个 prop 进行双向绑定

**代码演示：**（子组件传值给父组件）

<div id='div1'>   
        <com1  @passsc="parentMethods"></com1>   
    </div>
    <script type="text/javascript">
        var com1={
            template:`
                    <button @click="cbtn">子传父</button>              
            `,
            data:function(){
                return {
                    sc:'这是子组件的秘密'
                }
            },
            methods:{
                cbtn:function(){
                    //发送事件 相当于打电话
                    this.$emit('passsc',this.sc);
                }
            }
        }
        new Vue({
            el:'#div1',
            components:{com1},
            methods:{
                parentMethods:function(mimi){
                    console.log(mimi)
                    alert(mimi);
                }
            }
        });
    </script>

插槽(slot)

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
分类：默认插槽、具名插槽、作用域插槽
<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。

默认插槽

 父组件：<zujianming> 插槽内容 </zujianming>
 子组件：<slot></slot> （标签放在哪插槽内容就在哪）

具名插槽

 父组件：<zujianming slot='myslot' > 插槽内容 </zujianming>
         <zujianming v-slot:myslot > 插槽内容 </zujianming> （vue2.6以上写法）
 子组件：<slot name='myslot' ></slot> （标签放在哪插槽内容就在哪）

作用域插槽

作用域插槽代码演示：
父组件：<template>
<div>
    <h1>这里是父组件</h1>
    <child>
        <template slot-scope="slotsProps">
            {{slotsProps.info}}
        </template>
    </child>
    <!-- 自Vue2.6起，语法变成了这样 -->
    <child>
        <template v-slot:default="slotProps">
            {{slotProps.info}}
        </template>
    </child>
</div>
</template>

子组件：<template>
<div>
    <h2>这里是子组件</h2>
    <slot :info="info"></slot>
</div>
</template>

生命周期

1.**创建期** (Initialization）
beforeCreate: 在实例初始化之后，数据观测和事件配置之前被调用。
created: 在实例创建完成后被立即调用。这时候可以访问到组件的this对           
象，但是无法访问DOM 和template。

2.**挂载期**(Mounting)
beforeMount: 在挂载开始之前被调用，相关的render函数首次被调用。
mounted: el被新创 建的vm.$el替换，并挂载到实例上去之后调用该钩子
函数，这时的Dom已经渲染出来了。

3.**更新期**(Updating)
beforeUpdate: 在数据更新之前调用，发生在虚拟DOM重新染和打补丁之  
前。此时页面还没有被重新渲染。
updated: 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。页面
已经更新完毕。

4.**销毁期** (Destruction)
beforeDestroy: 在实例销毁之前调用。这时候实例仍然完全可用。
destroyed: 在实例销毁之后调用。这时候所有的事件监听和子实例都已经被  
 删除。

动态组件

component：
在Vue中，组件(component是指可以复用的代码块，它可以包含自己的视图模板、逻辑和样式等内容。组件将    
一个单一的Vue实例封装在内部，并允许通过props传递数据从而实现父子组件之间的通信。组件化开发能够提
高  代码的可重用性、可维护性和可测试性，使得开发者可以更加专注于业务逻辑的实现而非底层的技术细节。
在Vue中使用组件可以通过注册全局组件或局部组件来实现

Vue.js 过渡 &动画

Vue在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过
渡效果的组件
过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之
后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后
移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完
成之后移除。

v-model 双向绑定（vue响应式）

使得数据和视图之间建立了自动双向绑定关系，减少了手动操作 DOM 的频率，提高了开发效率。
可以在多个组件之间共享数据，当某个组件的数据更新时，其他组件也可以即时得到更新。
支持计算属性和侦听器等功能，使得数据和视图之间的关系更加灵活和可控。
可以根据需要动态添加、删除或修改数据，而无需手动操作 DOM 元素，从而避免了程序出错的可能性。

     模拟：代码演示
     <body>
          <p id='p1'></p>
      ​    <input type='text' id='input1' name='input1'>
     </body>

   <script>
       var p1 = document.getElementById('p1');
       var inpu1 = document.getElementById('input1');
       var obj = {
           name:'数据'
       }
       p1.innerHTML=obj.name
       inpu1.value=obj.name
       Object.defineProperty(obj,'name',{
           set:function(newdata){
               p1.innerHTML=newdata
               console.log('设置name')
           },
           get:function(newdata){
               console.log('获取name')
           }
       })
       input1.onchange=function(){
           obj.name=inpu1.value
       }
   </script>

vue路由

outer-link的一些属性：

(有时候想要 <router-link> 渲染成某种标签，例如 <li>),
active-class(设置 链接激活时使用的 CSS 类名)，
event (声明可以用来触发导航的事件)
router-link加事件不生效（加上修饰符.native）
1： 因为它是自定义标签，根本就没有事件和方法，所以不触发，加个native 就是告诉
vue 这个标签现在有主了 它是H5标签 可以加事件了。 2：父组件要想在子组件监听自己   
的click事件就得加native，router-link 其实就是一个封装好的 .vue 组件，所以需要 
加.native修饰符才能绑定事件。

 路由传参
同一个路由地址，根据传递的不同参数，显示不同的内容
this.$route.params.id （在模板中获取传的值）
路由懒加载

懒加载：---？也叫延迟加载，即在需要的时候进行加载，随用随载。
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的
大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使
做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加
载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

编程式路由
什么是编程式路由呢？就是通过写js代码来实现页面的跳转
Js window.location.href=”url 地址”
Vue $router.push({path: 'name'}) 或者$router.push('name');

this.$route.query接收

<div id="app">
	<div>
		<button @click="gotomore">我要去more</button>
		<button @click="goto">我要去too</button>
	</div>
	<router-view></router-view>
</div>
<script>
	const too      = {template:`<div>
		this is too
		<h2>{{this.$route.params.id}}<h2>
		 </div>`}
	const more     = {template:`<div>
		<p>my name is more</p>
		<router-link :to="{name:'childname',params:{name:'nihao'}}"  >go more child</router-link>
		<router-link to="/too/999" >go more twoooooooo </router-link>
		<router-view></router-view>
		</div>`}
	let   childone = {template:`<div>me is childs: {{$route.params.name}}</div>`}
	let   childtwo = {template:`<div>wosshi towo</div>`}
	const routes = [
		{
			path:'/too/:id',
			name:'too',
			component:too
		},
		{
			path:'/more',
			component:more,
			name:'more',
			children:[{
				path:'/more/childone/:name',
				name:"childname",
				component:childone
			},
			{
				path:'childtwo',
				component:childtwo
			}
		]
		}
	]
	const router = new VueRouter({
		routes:routes
	})
	new Vue({
		el:'#app',
		data:{
			num:100,
			list:[12,13]
		},
		methods: {
			gotomore(){
				this.$router.push({path:'/more'})
			},
			goto(){
				this.$router.push({name:'too',params:{id:123333}});
			}
		},
		router:router
	})
</script>

路由的重定向（redirect）

打开时直接显示这个指定的网页

路由守卫

to：要跳转到的目标路由
from：从当前哪个路由进行跳转
next：不做任何阻拦，直接通行
注意： 必须要确保 next函数 在任何给定的导航守卫中都被调用过一次。它可以出现多
次，但是只能在所有的逻辑路径都不重叠的情况下，否则会报错。 案例：

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局守卫：

全局前置守卫：
使用方式：main.js中配置,在路由跳转前触发，这个钩子作用主要是用于登录验证，也就   
是路由还没跳转提前告知，以免跳转了再通知就为时已晚
例子： router.beforeEach((to,from,next)=>{})

全局后置守卫
使用方式：main.js中配置,和beforeEach相反，它是在路由跳转完成后触发，它发生在 
beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。钩子不会接
受next函数也不会改变导航本身
例子：router.afterEach((to,from)=>{})

全局解析守卫
使用方式：main.js中配置,这个钩子和beforeEach类似，也是路由跳转前触发，区别是在   
导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在 beforeEach 
和 组件内beforeRouteEnter 之后，afterEach之前调用。
例子：router.beforeResolve((to,from,next)=>{})

组件内守卫

beforeRouteEnter(to, from, next)
使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单
独的vue文件里面的路由守卫

beforeRouteEnter(to, from, next) {
    // 在组件生命周期beforeCreate阶段触发
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },

beforeRouteUpdate(to, from, next)
使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单
独的vue文件里面的路由守卫

beforeRouteUpdate (to, from, next) {
    // 同一页面，刷新不同数据时调用，
    // 可以访问组件实例 
}

beforeRouteLeave(to, from, next)
使用方式：在组件模板中使用,跟methods: {}等同级别书写，组件路由守卫是写在每个单
独的vue文件里面的路由守卫

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
}

路由独享守卫

beforeEnter(to, from, next)
使用方式：在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守
卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

axios请求

安装：
cnpm install --save axios
cnpm install --save vue-axios
 第一个必须安装 第二个为插件
 
 Axios特点：
从浏览器中创建 XMLHttpRequests
 从 node.js 创建 http 请求
支持 Promise API
自动转换 JSON 数据 客户端支持防御 XSRF

 axios 的语法
get，请求的方式，如果表单请求，请使用post
url，请求的文件地址
then，请求成功时的回调函数
catch，请求失败时的回调函数

VueX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的
所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { // 存放数据 和data类似
  },
  mutations: { // 用来修改state和getters里面的数据
  },
  getters: { // 相当于计算属性
  },
  actions: { // vuex中用于发起异步请求
  },
  modules: {// 拆分模块
  }
})

安装：
npm install vuex --save