Vuex —— Day1

vuex概述

vuex是vue的状态管理工具，可以帮我们管理vue通用的数据（多组件共享的数据）

vuex的应用场景：

某个状态在很多个组件中都会使用（eg.个人信息）
多个组件共同维护一份数据（eg.购物车）

如果没有vuex，当我们遇到一些通用数据的场景，那原本的数据传递就会是：子传父、父传子；中间会经历大量的组件通信

但有了vuex之后，通用数据直接存到仓库里，将来任何组件都可以直接拿来用

优势：

共同维护一份数据，数据集中化管理
响应式变化 —— 任何一个组件对数据进行了修改，一旦vuex里的数据变化了，所有用到这个数据的地方都会立刻响应式更新

构建vuex多组件数据共享环境

目标：实现三个组件共享同一份数据 —— 任一组件都可修改数据；三个组件的数据同步

创建项目：vue create vuex-demo

其余

创建三个组件：（components文件夹下）App.vue、Son1.vue、Son2.vue

App.vue

<template><div id="app"><h1>根组件</h1><input type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'export default {name: 'app',data: function () {return {}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>

Son1.vue

<template><div class="box"><h2>Son1 子组件</h2>从vuex中获取的值: <label></label><br><button>值 + 1</button></div>
</template><script>
export default {name: 'Son1Com'
}
</script><style lang="css" scoped>
.box{border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值:<label></label><br /><button>值 - 1</button></div>
</template><script>
export default {name: 'Son2Com'
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>