Vuex的认识

1、vuex是什么？

vuex是一种项目中数据共享的方式。（vuex是项目中对于大规模状态【数据】的管理工具）

 

其具有以下优势：

• 能够在vuex中集中管理共享的数据，便于开发和后期进行维护

• 能够高效的实现组件之间的数据共享，提高开发效率（代码量）

• 存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

什么样的数据适合存储在Vuex中？

一般情况下，只有组件之间共享的数据才有必要存储到vuex中，对于组件中私有的数据依旧存储在组件自身的data中即可。

什么样的数据适合存储在Vuex中？

一般情况下，只有组件之间共享的数据才有必要存储到vuex中，对于组件中私有的数据依旧存储在组件自身的data中即可。

2、vuex核心概念

vuex的核心组成：

• state：状态，用于初始化仓库中的数据，在这里声明项目中全局使用的数据

• mutations：修改state数据的方法，存放用于修改state数据的方法

• • 只存放同于同步修改数据的方法

  • 每个方法接收俩个形参，依次是：

    • state：object，指的是仓库中的数据

    • payload：any类型，用于修改数据的数据源（可选）

  • 函数不需要return，所有操作都是基于state直接更改

• actions：修改state数据的方法，存放用于修改state数据的方法

  • 只存放同于异步修改数据的方法

  • 每个方法接收俩个形参，依次是：

    • context：object，指的是仓库对象（上下文对象）

    • payload：any类型，用于修改数据的数据源（可选）

  • 函数不需要return，所有操作都是基于state直接更改

  • 这里的方法本身自己不直接该数据，而是通过context对象调用mutations中的方法去修改数据

• getters：获取并修饰数据（对数据进行格式处理），存储用于修饰数据的方法

  • 里面的方法有一个形参

    • state：object，指的是仓库中的数据

  • 每个函数必须有返回值，返回修饰完的数据

• modules：模块化，存放模块化后的仓库模块，这里存放导入进来的模块变量

vuex语法，vuex支持对象属性形式、辅助函数形式去操作store中数据，所以每个操作都具备俩个语法：

• 获取state数据

  • 对象属性：this.$store.state.属性名

  • 辅助函数：mapState

    • 作用：将指定的state中的数据映射为组件自身的计算属性

    • 语法：

      • 写在computed中

      • ...mapState([属性名1,属性名2,....])

• 同步修改数据

  • 对象属性：this.$store.commit(方法名,载荷数据)

  • 辅助函数：mapMutations

    • 作用：将指定的mutations中的方法映射为组件自身的方法

    • 语法：

      • 写在methods中

      • ...mapMutations([方法名1,方法名2,...])

• 异步修改数据

  • 对象属性：this.$store.dispatch(方法名,载荷数据)

  • 辅助函数：mapActions

    • 作用：将指定的Actions中的方法映射为组件自身的方法

    • 语法：

      • 写在methods中

      • ...mapActions([方法名1,方法名2,...])

• 获取修饰数据

  • 对象属性：this.$store.getters.属性名

  • 辅助函数：mapGetters

    • 作用：将指定的getters中的数据映射为组件自身的计算属性

    • 语法：

      • 写在computed中

      • ...mapGetters([属性名1,属性名2,....])

Vuex工作流程图：

3、vuex模块化

• 为什么需要模块化？

  • 团队协作开发需要

  • 方便后期维护管理

• 怎么模块化？

  • 将除modules对象中的内容按照指定的拆分标准进行按文件分离

  • 在index.js中导入并在modules对象中注册

• 有什么需要注意的？

  • 因为模块化，后续的语法需要有所调整，具体见下

  • 命名冲突时会执行自动合并策略

    • state，名字相同也不会冲突

    • mutations、actioms里同名方法会被合并成数组，都执行（index.js中的是最先执行的）

    • getters如果同名，无法合并，直接报错

  • 通过命名空间来避免冲突（给每个模块开启命名空间）

    • 设置模块的namespaced属性为true即可

vuex模块化后的语法：

• 获取state数据

  • 对象属性：this.$store.state.模块名.属性名

  • 辅助函数：mapState

    • 作用：将指定的state中的数据映射为组件自身的计算属性

    • 语法：

      • 写在computed中

      • ...mapState(模块名,[属性名1,属性名2,....])

• 同步修改数据

  • 对象属性：this.$store.commit(模块名/方法名,载荷数据)

  • 辅助函数：mapMutations

    • 作用：将指定的mutations中的方法映射为组件自身的方法

    • 语法：

      • 写在methods中

      • ...mapMutations(模块名,[方法名1,方法名2,...])

• 异步修改数据

  • 对象属性：this.$store.dispatch(模块名/方法名,载荷数据)

  • 辅助函数：mapActions

    • 作用：将指定的Actions中的方法映射为组件自身的方法

    • 语法：

      • 写在methods中

      • ...mapActions(模块名,[方法名1,方法名2,...])

• 获取修饰数据

  • 对象属性：this.$store.getters["模块名/属性名"]

  • 辅助函数：mapGetters

    • 作用：将指定的getters中的数据映射为组件自身的计算属性

    • 语法：

      • 写在computed中

      • ...mapGetters(模块名,[属性名1,属性名2,....])