一.Vue是什么?

阐述理解 : `Vue是一个专门为Vue.js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,解决多组件的组件数据通信(抛开了之前的父子组件互传的概念)`

加深理解-->理解要点

1.从三点来说

(1) : Vue官方搭配,专属使用(类似于 : vue-router),有专门的的调试工具

(2)集中式管理数据状态方案(操作更简洁)data(){return {数据,状态}}

(3)数据变化是可预测的(响应式)

2.Vue官方提供的

附图便于理解:更多作用于大型项目

二.Vuex中有五大重点内容需要学习 (学习是世间的灵药) :

1.state : 统一定义保存公共数据 -->(类似于data(){return {a:1,b:2,xxxx}})

2.mutations : 使用它来修改数据 (类似于methods)

3.getters : 类似于computed(计算属性,对现有的状态进行计算得到新的数据)

4.actions : 发起异步请求

modules : 模块拆分 可以将代码计算写在拆分的模块中

重点图 1 :

首先当然是先下个包

1.安装整体步骤 :

(1). 安装。它是一个独立的包，需要先安装。

(2) 配置

a. 创建Vuex.store实例

b. 向Vue实例注入store

(3). 使用。在组件中使用store


npm install vuex@3.6.2

开发依赖 ： npm i xxxx --save-dev ;  npm i xxxx -D ;
 
生产依赖： npm i xxxx --save ;            npm i xxxx -S;     npm i xxxx

2.在组件中使用 store

(1)state 保存公共数据使用: this.$store.state.数据1

(2)mutations 修改数据

使用:this.$store.commit("mutations里对应函数的名字",实参)

(3)getters 计算属性

定义: {getters { getters函数名字(state里的数据名){return 计算结果} } }

使用:this.$store.getters.名字

(4)actions 异步请求ajax->vuex(可以在state里定义空数组再在mutations将获取到ajax赋值进去)

定义:

        {actions:
          {
          actions名字(context,参数){
          axios.... 
          context.commit('mutations名字',数据) //将ajax发送给m函数赋值给空数组
          }
        }
      }

使用:this.$store.dispatch('名字',实参)-->可以挂载在created等几个钩子上

(5)modules 拆分模块

定义: 附图吧图中详细写了如何建立文件并使用所以说在大型项目中拆分模块必不可少的,

在index.js文件中就无须多写代码了,便于维护

详细使用:导入-->import1 模块1 from'./modules/模块1.js'

        {modules:{
          模块1
         }
       }

模块1中: 导出-->

     export default {
        namespaced:true //此行是严格模式,开启可以规范代码逻辑,个人考虑开不开随你公司要求与个人意志
        state,
        mutations,
        getters,
        actions
      }

重点:使用了模块化之后调用模块中

state,mutations,getters,cations{

state:this.$store.state.模块1.数据名子

mutations:this.$store.commit('模块名/m函数名,参数')

getters:this.$store.state.getters['模块名/g名字']

actions:this.$store.dispatch('模块名/a名字',参数)

}

三.map辅助函数

(可以了解使用)

1.作用:简化使用state,getters,mutations,actions

2.步骤:

1.import{mapState}from'vuex'

2.模块 computed:{...mapState('模块名',['xxx'])}

3.全局 computed:{...mapState(['xxx'])}

4.重命名 computed:{...mapState({新名字:'xxx'})}

vuex的个人理解与自我学习