Vue:Avoid mutating a prop directly since the value will be overwritten ...警告解决方法

这个报错的原因就是props值不能被改变

这个问题的本质还是组建通信的双向绑定问题

在vue2.0文档中有这么一段话：

   在一些情况下，我们可能会需要对一个 prop 进行『双向绑定』。事实上，这正是 Vue 1.x 中的 .sync修饰符所提供的功能。当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了『单向数据流』的假设。由于子组件改变 prop 的代码和普通的状态改动代码毫无区别，当光看子组件的代码时，你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。
上面所说的正是我们在 2.0 中移除 .sync 的理由。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。
  从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。

1..sync方法

也就是说，如果你用的vue版本是2.3.0+，那么你可以放心使用.sync

<comp :foo.sync="bar"></comp>会被扩展为：<comp :foo="bar" @update:foo="val => bar = val"></comp>当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：this.$emit('update:foo', newValue)

这就是props传入和emit传出的过程

#

2.对象特性

使用对象的引用特性完成的双向绑定
因此我们可以传入对象，然后在子组件中修改对象属性的值那么父组件中该值也会发生变化

#

3.vuex

当我们的项目比较复杂时就很有必要用到vuex了
vuex文档
这里简单的理一下顺序
vuex中有mapAction和mapGettters两个方法

|=》通过mapAction把函数传递出去

|=》在actions中 利用内置commit=》mutations

|=》在mutations引入getters（这个类似store的计算属性） 定义state状态，然后通过mutations来改变state，最后导出state,mutations,getters…发现自己讲不太清楚哈哈~还是看文档吧 慢慢悟好好学~


import {CLOSE, IS_SHOW ,REG_SHOW,ABOUT_SHOW,SHOW} from "./types";
import getters from './getters'
const state = {
close:false,
state:0,
isShow:false
};
const mutations = {
[IS_SHOW](state){
state.state = 1;
state.isShow = !state.isShow;
}
export default {
state,
mutations,
getters
}
[TOC]