Vue2学习第四天（vuecli，vuex）

1.自定义创建项目脚手架步骤

1.创建项目

2.选择第3个自定义

3.空格勾选4个（babel,router,css,linter）回车继续

router history（带斜杠） 需要系统配置这里选no 就可（哈希地址栏带#号）

选择保存时校验规范

放在单独配置文件下

4.ESlinter

2.Vuex

1.介绍

Vuex是一个用于管理Vue.js应用程序状态的库。它将所有的状态管理逻辑集中在一个地方，以便于维护和理解。Vuex为Vue应用程序提供了以下功能：

1. 状态管理：Vuex提供了一种清晰和可维护的方式来组织和管理应用程序的状态。它允许我们将状态组织成一层层的模块，每个模块有自己的一套状态。

2. 响应式编程：Vuex使用响应式引擎来确保状态的改变会自动影响到视图。这样，我们就可以在组件中直接使用this.state来访问和修改状态，而无需手动触发视图更新。

3. 副作用：Vuex允许我们在状态更新时执行一些副作用操作，例如发送HTTP请求、触发其他动作等。

4. 测试友好：由于Vuex将状态管理逻辑集中在一个地方，我们可以在单元测试中更容易地模拟和验证状态更新。

5. 代码重用：由于Vuex允许我们将状态组织成模块，我们可以将模块化的状态管理逻辑复用给不同的Vue应用程序。

Vuex的主要结构如下：

• store：一个Vuex store，包含所有的状态、响应式和副作用。
• modules：一个对象，包含所有的状态模块。
• actions：一个对象，包含所有的action函数。
• getters：一个对象，包含所有的getter函数。
• mutations：一个对象，包含所有的mutation函数。

Vuex提供了一些工具和插件，如vue-router、vue-apollo等，可以帮助我们更好地管理和使用Vuex。

2.创建仓库步骤：

3.使用数据

1.使用MapState辅助函数简化代码

...代表展开运算符

4.修改数据（mutations）

1.封装方法在组件中调用this.$store.commit('方法名')

2.mutations支持传递参数(最多两个)

注意这里如果要传递多个参数，可以采用对象或数组

3.单项数据流需要拆分v-model

4.辅助函数mapMutations帮忙封装方法(方法多的时候)推荐使用

注意导入在组件中

5.异步操作actions(请求)

注意这里actions异步不能直接操作state

1.使用辅助函数mapActionsz简化函数封装

6.getters类似于组件的计算属性（有条件的处理获取数据）

例如：

创建getters,写逻辑，注意第一个参数是state

在组件中导入并用辅助函数mapgetters导出，注意和mapstate一样在计算属性computed下

两种调用方式，一种原生一种用辅助函数

3.vuex模块module（项目大数据多的时候，需要分模块）

1.创建模块，在store/modules目录下

2.在index,js中进行导入和挂载

3.调用访问（原生和辅助函数mapstate）

注意：用辅助函数访问子模块需要在当前访问的模块.js中加一个namespaced，开启命名空间再调用

4.同理，其他3个（mapMutation,Mapaction,MapGetters）一样

1.注意：这里用原生访问模块getters的话不能用访问对象的方法（模块名.对象名×），出现了/特殊字符，这里需要用['']包括。

所以推荐使用辅助函数map映射

2.注意：mutation和actions也需要开namespaced

注意模块映射

小结：推荐使用辅助函数映射开发中