状态数据 state

1.1 声明数据

//在 store/index.js 中声明
export default new Vuex.Store({
  //状态数据，要共享的数据必须放在这里
  state: {
    username: '李白',
    age: 18,
  },
})

1.2 访问数据

第一步：在计算属性中获取数据

computed:{
    /*
    //1. 直接使用 vuex 里面的数据
    username(){
        return this.$store.state.username;
    },
    age(){
        return this.$store.state.age;
    }
    */

    //2.1 通过辅助函数使用 vuex里面的数据--数组
    //...mapState(['username', 'age']),

    //2.2 辅助函数，通过参数对象配置别名--对象
    ...mapState({
        un: state=>state.username,
        age: state=>state.age,
    }),
}

第二步：在页面模板中使用数据

<template>
    <div>
        <h1>状态数据 state</h1>
        <h1>{{un}}</h1>
        <h1>{{age}} 岁</h1>
    </div>
</template>

2. 修改数据 mutations

2.1 声明mutations方法

在 src/store/index.js 找到 mutations 里面写方法，是唯一可以修改vuex数据的方式

mutations: {
    //年龄累加函数
    add(state, payload) {
      state.age += payload;
    },

    //年龄累计减少
    reduce(state, payload) {
      state.age -= payload;
    },
},

2.2 提交mutations修改数据

调用提交mutations有两种方式：直接提交 和 辅助函数

methods:{
    /*
    //1. 直接提交mutations方法
    add(n){
        this.$store.commit('add', n);
    },
    reduce(n){
        this.$store.commit('reduce', n);
    }
    */

    //2. 辅助函数触发mutations方法--数组【推荐】
    // ...mapMutations(['add', 'reduce']),

    //2.2 辅助函数触发mutations方法--对象，可以设置别名
    ...mapMutations({
        add: 'add',
        reduce: 'reduce',
    }),
}

3. 数据二次处理 getters

3.1 声明二次处理函数

//数据二次处理，相当于vuex的计算属性
getters: {
    showName(state) {
        if (state.age >= 18) {
            return '姓名：' + state.username;
        } else {
            return '姓名：' + state.username + '（未成年）';
        }
    },
    showAge(state) {
      return '年龄：' + state.age + ' 岁！！！';
    }
},

3.2 使用getters二次处理函数

import {mapGetters} from 'vuex'
export default {
    computed:{
        /*
        //1. 直接使用getters二次处理方法
        showName(){
            return this.$store.getters.showName;
        },
        showAge(){
            return this.$store.getters.showAge;
        }
        */

        //2. 辅助函数调用getters--数组
        // ...mapGetters(['showName', 'showAge']),

        //2.2 辅助函数调用getters--对象，可以取别名
        ...mapGetters({
            username:'showName',
            age:'showAge',
        })
    }
}

4. 异步修改数据 actions

4.1 声明异步修改数据函数

actions: {
    asyncAdd(context, payload) {
        //1秒以后再提交修改
        setTimeout(() => {
            context.commit('add', payload);
        }, 1000);
    },

    asyncReduce(context, payload) {
        setTimeout(() => {
            context.commit('reduce', payload) //context相当于 this.$store
        }, 1000)
    }
},

4.2 使用actions方法

methods:{
        /*
        //1. 直接调用actions的方法
        add(n){
            this.$store.dispatch('asyncAdd', n)
        },
        reduce(n){
            this.$store.dispatch('asyncReduce', n);
        }
        */

        //2. 辅助函数调用actions--数组
        // ...mapActions(['asyncAdd', 'asyncReduce']),

        //2.2 辅助函数调用actions--对象，可以取别名
        ...mapActions({
            add:'asyncAdd',
            reduce:'asyncReduce',
        })
}

html模板：

<button @click="reduce(1)">减1</button>&nbsp;
<button @click="add(1)">加1</button>

5. 多模块 modules

5.1 分模块

modules可以将vuex仓库拆分成多个模块，每个模块单独存放数据，相互之间不影响

命名空间：命名空间是一个声明性区域，为其内部的标识符提供一个范围。 命名空间用于将代码组织到逻辑组中,还可用于避免名称冲突。

  //多模块，将仓库拆分成多个模块，每个模块保存自己的数据和操作方法
  modules: {
    //A模块，每一个模块拥有四大属性 state  mutations  getters  actions
    moduleA: {
      namespaced: true, //启用命名空间
      state: {
        username: '杜甫',
        age: 20,
      },
      mutations: {
        //修改模块A的年龄
        add(state, payload) {
          state.age += payload;
        }
      },
      getters: {},
      actions: {},
    },

    //B模块
    moduleB: {
      namespaced: true, //启用命名空间
      state: {
        username: '王维',
        age: 28,
      },
      mutations: {
        //修改模块B的年龄
        add(state, payload) {
          state.age += payload;
        }
      },
      getters: {},
      actions: {},
    }
  }

5.2 分模块读数据

computed:{
        //访问模块A的数据
        usernameA(){
            return this.$store.state.moduleA.username;
        },
        ageA(){
            return this.$store.state.moduleA.age;
        },

        //访问模块B的数据
        usernameB(){
            return this.$store.state.moduleB.username;
        },
        ageB(){
            return this.$store.state.moduleB.age;
        },
}

5.3 分模块修改数据

注意：必须开启命名空间

methods:{
    //修改模块A的年龄
    addA(){
        this.$store.commit('moduleA/add', 1);
    },

    //修改模块B的年龄
    addB(){
        this.$store.commit('moduleB/add', 2);
    }
}