2024年大二上学习日记9.4-9.6

9.4

1.学习vuex的概念：vuex是vue的一个组件，可实现集中式（状态）数据管理，适用于任意组件间通信（对比之前学的消息的发布和订阅会更加方便）。

2.学习vue求和案例

当value前面没有加冒号时，会将值当成字符串处理，加上冒号就是之前学的v-bind知识，冒号里面的内容会被当成js表达式处理。

更加简便的方法是对v-model绑定的值进行强制类型转换

3.学习vuex的原理

如果需要发送AJAX请求去访问另一台服务器上的数据时，actions这个环节是不可省略的

Actions，mutations,state的数据类型均为对象，均需要一个store(仓库)去管理。

9.5

1.搭建vuex环境，vue2的项目使用vuex3,vue3的项目使用vuex4,

在main.js文件中引入插件并使用插件

在src目录下新建一个名为store的文件夹，文件夹下新建一个名为index.js的文件

在store/index.js中引入Vuex是因为要先应用了vuex才能使用store,但是在js文件中使用import时，文件在解析时会优先运行import文件，导致Vue.use语句无法在创建store之前运行。

2.写求和案例vuex版

为了区分actions和mutations中的方法，actions中的方法名写小写，mutations中的方法名写大写。

在文件store/index/js中

在Count组件中调用store中的commit方法和dispatch方法

3.学习使用vue开发者工具

我的界面如下

尚硅谷讲师的界面如下，我没有找到设置mutations地方，看不到

9.6

1.学习getters的使用          

2.学习mapGetters，mapState，mapActions,mapMutations

在Count组件中引入mapState和mapGetters

MapState前面三个点（ES6语法）表示在computed对象中展开mapState对象中的key和value，而对象写法中给值加单引号的原因是：sum的值要求是一个字符串，如果不加单引号，会将sum当成一个变量处理。

使用数组写法时需要保证使用数据时所用的名称要与state中定义的数据名称一致

需要注意，调用increment方法是要传入n这个参数，如果不传入参数，就会默认传入点击事件event

3.学习多组件共享数据

要搞清楚数据绑定的关系。