Vuex 的基本使用

Vuex是什么?

Vuex 是 vue 项目中实现大范围数据共享的技术方案。

作用：能够方便、高效地实现组件之间的数据共享。

使用 Vuex 的好处?

① 数据的存取一步到位，不需层层传递

② 数据的流动非常清晰

③ 存储在 Vuex 中的数据都是响应式的

1.State的基本使用

概念：State 本质上就是 Object 对象

作用：用来存储全局共享的数据

方式1: this.$store.state.全局数据名称

方式2:基于 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性：

 1. 按需导入辅助函数 mapState
import { mapState } from 'vuex'

export default{
  ...
 computed:{
  2. 把需要的全局数据,映射为当前组件的计算属性
   ...mapState(['count'])
 }
}
复制代码

2.mutation 的基本使用

概率: Mutation 本质上是 JavaScript 函数，专门用来变更 Store 中的数据。

Mutation 的使用步骤

① 在 Vuex 中定义 Mutation 方法

② 在组件中调用 Mutation 方法

方式1:this.$store.commit('方法名')

方式2:

载荷（Payload）

Vuex 中的载荷就是参数的意思，通过载荷可以提高 Mutation 方法的通用性,

在组件中，可以通过 this.$store.commit() 方法的第二个参数来提交载荷（参数）

mapMutations 辅助函数

基于 Vuex 提供的 mapMutations 辅助函数，可以方便的把 Store 中指定的方法，映射为当前组件的 methods

  所有 mutation 中的函数, 第一个参数都是 state
  通过 state 可以直接获取全局的数据, 进行操作
  payload : 载荷, 如果要接受更多的数据 只能通过这一个对象传递过来
  注意: mutation 函数只有 2 个参数, 第一个是 state 第二个是 payload, 如果需要传递多个参数过来, 可以传一个对象, 在对象中定义多个属性

mutations: {
    add(state, payload) {
      state.count += payload.num
        console.log(payload.name);
    }
  },
    
    // 1. 按需导入
   import { mapMutations } from "vuex";


export default{
  ...
methods: {
      
   //   方式1:   传参: commit(),传入第二参数,多个参数用对象形式传参
      btn(){
   
      this.$store.commit('add',{num:2,name:'蓝汐'})      
     }
      
   //  方式2:  add函数也可以作为事件的处理函数进行绑定,事件触发时会自动执行    
      ...mapMutations(["add"]),
   
    }
} 
复制代码

3.Action 的基本使用

Mutation 必须是同步函数

在项目开发中，为了保证 Store 中状态的每一次变化都是可追踪的，Vuex 规定： Mutation 必须是同步函数

。否则，vue-devtools 将无法正常追踪 Store 中数据的变化，这对大型项目的开发调试是灾难性的！

Action 是什么呢?

Action 本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作。

Action 的使用步骤

①定义 Action 方法

②调用 Action 方法

③在 Action 方法中定义载荷

④调用 Action 方法时提交载荷

mapActions 辅助函数

基于 Vuex 提供的 mapActions 辅助函数，可以方便的把 Store 中指定的 Action，映射为当前组件的 methods

 <button @click="subAsync({ num: -9 })" class="btn btn-warning">-9</button>

actions: {
    // action  函数第一个参数都是 context
    subAsync(context, payload) {
      setTimeout(() => {

        context.commit('add', payload)

      }, 1000)
    }
  }

export default{
 methods: {
    ...mapActions(["subAsync"]),
  },
}
复制代码

4.Getter 的基本使用

Getter 是什么

Getter 本质上是 JavaScript 函数。

作用：它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。

定义 Getter 方法

①访问 Getter 的第一种方式:this.$store.getters.xxx

②访问 getter 的第二种方式:

    getters 中定义的本质上也是一个函数
    所有 getters 中函数的第一个参数都是 state
     为什么使用 getters ?
     因为计算属性只能在当前组件中使用, 如果多个组件都需要依赖同一个计算属性, 那只能复制粘贴, 而 getters 相当于一个全局的计算属性, 可供每个组件使用

 <p>是否全选:{{ isAll }}</p>
getters: {   
    isAll(state) {
      return state.list.every((item) => item.isDone);
    },
  },
    //  按需导入
   import { mapGetters } from "vuex";
   
export default{
   computed: {
    ...mapGetters(["isAll"]),
  },     
}
复制代码

5.Module 的基本使用

①Module 是什么

Vuex 中的 Module 表示按照模块化的开发思想，把不同的数据和方法，按照彼此的关联关系进行封装。

②定义模块

每个模块都是彼此独立的，都可以拥有自己的 state、mutations、actions、getters 节点

③注册模块

④namespaced（命名空间）

namespaced（命名空间）可以解决不同模块之间成员名称冲突的问题。在实际项目开发中，建议为每

个 Module 模块都开启命名空间！

⑤开启命名空间

在定义模块时，只需在模块的根节点中声明 namespaced: true 选项，即可为当前模块开启命名空间：

通过模块的注册名称访问模块下的成员

当模块启用了 namespaced: true 选项之后，模块就有了自己的命名空间。此时，模块内的成员需要通

过模块的注册名称才可以访问到。

export default {
  // 在子模块中添加一个 namespaced 属性开启命名空间, 全局就无法使用 commit 触发子模块的 mutation 的函数了
  
  namespaced: true, // 开发中一定要加
  
  // 区别: 从对象变成了函数, 函数内要返回一个对象
  state: () => ({ num: 0 }),
  
  mutations: {
    // 默认情况下, 子模块中的所有 mutations / actions 都是可以直接访问的
    // 第一个参数是 state
    test(state) {
      console.log('我是子模块 count 中的 test 函数')
    }
  },            // 子模块的 mutation 同步修改数据
  
  actions: {}, // 子模块的 actions 处理异步任务
  getters: {}, // 子模块的计算属性
};

//  按需导入
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

    如果是映射子模块的数据, 需要传 2 个参数
    参数1: 子模块注册的名称
    参数2: 要映射的数据
  

 export default{
      访问命名空间下的 state 数据
  computed: {
    ...mapState('count', ['num']),    
    },
  methods: {
     访问命名空间下的 mutation 方法
    ...mapMutations('count', ['test'])
  }
}
mapActions, mapGetters 同上