Vuex的使用

Vuex的基本使用

1.安装vuex npm i vuex@3 (版本号为3，对应vue2,版本号为4,对应vue3)

2.创建文件store文件，然后编写一个js代码 导入Vue和Vuex 准备三个对象 state{} actions{} mutations{}

创建store对象并且导出 // 引入Vue import Vue from 'vue'; // 引入vuex import Vuex from 'vuex'; // 使用插件，但是这个use要在import store之前，所以放在export之前 Vue.use(Vuex);

          // 准备actions-用于组件动作的响应
       const actions={
         // context是一个上下文对象
         // 因为这里的加和减只进行了commit操作，可以省略，commit可以在最开始进行
        jiaobb(context,value)
        {   
            // 一些算前的操作放在actions里面
            if(context.state.sum%2)
            {
                context.commit('JAN',value);
            }
            console.log('jiaobb');
            
        },
        jiawait(context,value)
        {
            setTimeout(()=>{
            context.commit('JAN',value);
            },500);
            console.log('jiawait');
        }
    };

    // 准备mutation-用于操作数据
    // 这里的数据的操作只有加和减
    const mutations={
        // 第一个参数是state对象
            JAN(state,value)
            {
            state.sum+=value;
            },
            JIAN(state,value)
            {
                state.sum-=value;
            },
    };

    // 准备state-用于存储数据
    const state={ 
        sum:0,
    };

    // 创建store,并且导出
    export default new Vuex.Store({
        actions,
        mutations,
        state,
    })

注意：1.组件读取vuex的数据：$store.state.sum

           2.组件修改vuex的数据：$store.dispatch('action中的方法ming',数据)或者                                           $store.commit('mutations里面的方法名'，数据); 如果没有网络请求或者其他的业务逻辑，组件可 以越过actions,在组件里面用commit

getters配置项

1.使用场景：当state里面的数据需要加工后使用的数据可以放在这个里面，并且处理的数据比较复杂复用性也比较高

2.使用方式：

  1.在store里面配置getters,在getters里面写函数，并且编写代码

   // 创建getters配置项，里面放对state里面的数据进行操作
            const getters = {

                // bigNum是操作后的数据

            bigNum(state)

            {
                return state.sum*10;

            }
            }

    // 创建store,并且导出

    export default new Vuex.Store({

        actions,

        mutations,

        state,

        getters

    })

2.组件里面读取数据：

    {{$store.getters.bigNum}}

   3.四个map方法

   1.使用场景为了减少代码的复用，可以直接使用store里面的一些数据

  mapState()和mapGetters()

   1.mapState():帮助我们映射到state里面的数据为计算属性直接使用

         使用方法：1.借助计算属性，对象写法，得到的结果是一个对象,所有要使用...将对象展开

         参数一个对象，每个计算属性都以key val形式出现，key是计算属性的名字，val是state里面           的值

   ...mapState({school:'school',name:'name'}),

                  2.写成数组的形式,里面的数据是作为计算属性的名字和state数据是一样

 ...mapState(['school','name']),

   2.mapGetters():帮助我们映射到getters里面的数据为计算属性直接使用

  // 2.mapGetters() 和mapState一样的作用，是从getters配置项里面读取数据

        ...mapGetters({bigNum:'bigNum'}),

        // ...mapGetters(['bigNum']),

 mapMutations和mapActions

    1.mapMutations:用于生成与mutation对话的方法，即包括： this.$store.commit('JAN',this.num) 的函数
   

    ...mapMutations({add:'JAN'},{sub:'JIAN'}),//对象写法

        ...mapMutations(['add','sub])//前面和后面的一样的名字用数组的写法

   

    2.mapActions:用于生成与actions对话的方法，即包括： this.$store.dispatch('JAN',this.num) 的函数

          // mapActions

        ...mapActions({addobb:'jiaobb',addwait:'jiawait'})//对象写法

        //  ...mapActions(['jiaobb','jiawait'])//前面和后面的一样的名字用数组的写法

    调用函数的时候，要在模板绑定事件的时候传入参数，不然默认传过去的参数是event

 <button @click="add(num)">+</button>

       <button @click="sub(num)">-</button>

       <button @click="addobb(num)">为奇数的时候加</button>

       <button @click="addwait(num)">等一会再加</button>

   4.Vuex模块化

## 模块化+命名空间

1.模块化store/index.js

    将一个模块(比如登录，登录这种模块)的功能和数据的配置写在一起，然后到Store里面再进行配置

        // 与计算相关的数据和功能 
const countAbout = {

            // 需要命名空间

            namespaced:true,

            state:{

            },

            getters:{  

            },

            actions:{

            },

            mutations:{

            }

        }

      <!-- 与展示相关的内容 -->

        const showAbout = {

            namespaced:true,

            state:{

                school:'wtu',

                name:'ywx',

            }

        }

       

export default new Vuex.Store({

                //   模块化

                modules:{

                    countAbout,

                    showAbout

                }

        })

# 2.读取数据，需要加上模块的名字   

         

   //1.读取state里面的数据

    //方式一：使用map函数

    ...mapState('countAbout',{sum:'sum'})//map方法

    //方式二：直接读取

    this.$store.state.countAbout.sum;

 //2.读取getters的数据:

    //方式一：使用map函数

    ...mapGetters('countAbout',{bigNum:'bigNum'})//map方法

    //方式二：直接读取

    this.$store.getters['countAbout/bigNum']

    //3.响应actions里面的方法：

     //方式一：使用map函数

    ...mapActions('countAbout',{addobb:'jiaobb'})//map方法

    //方式二：直接调用dispatch

    this.$store.dispatch('countAbout/jian',num);

   // 4.响应mutations里面的方法

     //方式一：使用map函数

    ...mapMutations('countAbout',{add:'JAN'})//map方法

    //方式二：直接读取

    this.$store.commit('countAbout/JAN',num)

注意：要开启命名空间，不然会找不到，会报错

         还可以把同模块化的配置放在不同的js文件里面再引入