Vuex的学习与使用（1）store

1. 安装Vuex

2.创建store
2.1 新建store文件夹
3.1.1文件夹包含文件
（1）index.js 内容配置

image.png

3.在main.js中引入

image.png

4.页面中的使用
4.1 在script中 的computed:{ } 里面写入要传的值；

4.2 在页面直接渲染即可；

image.png

mapState 辅助函数

当一个组件需要获取多个状态时，将状态都声明计算属性会重复和冗余，在这种情况下推荐使用mapState

1.1导入mapstate

1.2在computed里使用方法

image.png

image.png

（如果在computed中有计算属性，则在computed中加入解构运算符 ... 俗称展开）

例1如

image.png

结果

image.png

例2

image.png

image.png

image.png

结果为 3，4，5，6

image