Vuex的基本使用

前言：

        vuex是集中式状态（数据）管理机制（也可以称为：组件全局状态管理），用于组件之间的数据共享。

Vuex安装：

npm install vuex --save

若报错如下，请使用下方命令：

解决方法：

1.  Vuex版本问题 请使用这个命令安装

vuex:  npm i vuex@3.6.2

必须指定 3.6.2 版本才能正常使用

 导入包，创建实例，挂载到vue：

vuex的核心：

• state 

 state提供唯一的公共数据源，偶有共享的数据都要统一放到store中存储。

方式一

        this.$store.state.全局数据名称

 方式二

        //从vuex中按需导入mapState函数

        import { mapState } from 'vuex

        //将当前组件需要的全局变量，映射为组件的computed计算属性。

        computed: {

                ...mapState( [ '全局数据名称' ] )

        }

• mutation

 mutation用于变更store中的数据，如图：

方式一：

方式二

        //从vuex中按需导入mapMutations 函数

        import { mapMutations } from 'vuex

        //将当前组件需要的函数，映射为组件的computed计算属性。

        ...mapMutations ( [ '函数名称' ] )

• action

 action用于处理异步任务，异步必须通过action,但是在action中还是要通过触发mutation的方式间接变更数据：

方法一

方法二

        //从vuex中按需导入mapActions 函数

        import { mapActions } from 'vuex

        //将当前组件需要的函数，映射为组件的computed计算属性。

        ...mapActions ( [ '函数名称' ] )

  

• getter

 getter用于对store中的数据进行加工形成新的数据

        1）类似vue的计算属性；

        2）store中的数据变化，则getter的数据也会跟随变化

方式一

        this.$store.getters.名称

方法二

        //从vuex中按需导入mapGetters 函数

        import { mapGetters } from 'vuex

        //将当前组件需要的函数，映射为组件的computed计算属性。

        ...mapGetters ( [ 'showNum' ] )

  

模块化

        由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module），本章针对基本用法就不作多说，有兴趣的小伙伴可以去翻阅资料学习哦~