VueX作用
　　 VueX是一个数据仓库，它可以管理多个组件公用的数据。

　　 没有学习VueX的时候，子组件要向父级组件传递信息则通过$emit()自定义事件，父组件如果要向子组件传递信息则通过props。

　　 这是一种单向的数据流，操纵起来比较麻烦。

　　 [图片]

　　 有了VueX一切都变得简单了，你只需要从VueX这个实例中中读取、操纵、修改模块仓库数据即可。

　　 [图片]

安装Vuex
　　 这里是VueX官方文档提供的安装方法：

　　 安装

　　 直接下载：


　　 CDN引入：

　　 NPM安装：

npm install vuex --save
state
定义仓库
　　 使用state来定义一个仓库：

// 定义一个购物车模块，包含state仓库
const cart = {
state: {
commodity: [
{id: 1, name: "苹果手机", price: 399, num: 10},
{id: 2, name: "苹果电脑", price: 1399, num: 21},
]
},
}

// 实例化出Vuex对象使用模块化管理该购物车模块
const store = new Vuex.Store({
modules: {
cart,
}
})

// 根组件中注册Vuex实例
const app = new Vue({
el: "#app",
store,
})获取数据
　　 如果想要拿到这个数据仓库，则组件要通过计算属性进行获取：

return this.$store.state.模块名.仓库内容
　　 如下所示，子组件购物车进行内容展示：

　　 [图片]




0" border="1px" :style="{borderCollapse:'collapse'}">
购物车


商品编号
商品名称
商品价格
商品数量
价格小计




{{item.id}}
{{item.name}}
{{item.price}}
{{item.num}}
{{item.num * item.price}}