vuex的基本使用

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

vuex的基本使用目录

11.1 Vuex 起步

1. Vuex 是什么

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

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

2. 使用 Vuex 的好处

1. 数据的存取一步到位，不需层层传递
2. 数据的流动非常清晰
3. 存储在 Vuex 中的数据都是响应式的

3. 在项目中安装和配置 Vuex

• 步骤：
  1. 前期的准备：安装 Vuex 的依赖包
  2. 封装 Store 模块
  3. 导入并挂载 Store 的实例对象

3.1 安装 Vuex 的依赖包

• 运行如下的 npm 命令，在把 Vuex 安装为项目的依赖包：

3.2 封装 Store 模块

• 主要的实现步骤如下：
  1. 导入 Vue 和 Vuex 依赖包
  2. 把 Vuex 安装为 Vue 的插件
  3. 创建 store 的实例对象
  4. 向外共享 store 的实例对象

• 在store/index.js文件中

1. 导入包 vue 和 vuex

// 这是 vuex 的 Store 模块
// 1. 导入包 vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

2. 调用 Vue.use() 函数把 Vuex 安装为插件

// 2. 调用 Vue.use() 函数把 Vuex 安装为插件
Vue.use(Vuex)

3. new Vuex.Store() 创建 store 的实例对象

// 3. new Vuex.Store() 创建 store 的实例对象
const store = new Vuex.Store({
  // 开启 vuex 的严格模式，如果检测到了组件直接修改全局数据，
  // 则立即终端报错！
  // vue 官方建议程序员：在项目上线的时候，一定要把 strict: true 去掉，
  // 因为它会降低 vuex 的性能
  strict: true,
  // 全局共享的数据，都存储到 state 这个对象中
  state: {
    count: 0
  },
  // 专门用来修改全局的数据
  mutations: {
    // 1. mutation 必须是函数
    // 2. 第一个形参，永远都是 state
    add(state, n) {
      state.count += n
    }
  },
  // 专门处理异步操作
  // Ajax 请求、延迟器、定时器...
  actions: {
    // 定义一个异步自增的函数
    // action 函数的第一个形参，永远都是 ctx,
    // ctx 就是 new 出来的 store 实例对象
    addAsync(ctx, n) {
      // 1. 延迟1秒
      setTimeout(() => {
        // 2. 调用 add 这个 mutation 函数
        // ctx.commit() 函数的作用，就是调用指定名称的 mutation
        ctx.commit('add', n)
      }, 1000)
    }
  }
})

4. 向外导出 store 的实例对象

// 4. 向外导出 store 的实例对象
export default store

3.3 把 Store 实例挂载到 Vue 实例上

• 主要的实现步骤：
  1. 导入 store 模块
  2. 挂载 store 实例对象

• 在main.js中

1. 导入 store 模块

// 1. 导入 store 模块
import store from '@/store'

2. 挂载 store 实例对象

new Vue({
  render: h => h(App),
  // 2. 把 store 模块挂载到 Vue 实例上
  // （挂载完毕之后，每个 .vue 组件中，就可以访问全局共享的数据啦）
  // store: new出来的store实例
  // store: store
  store
}).$mount('#app')

11.2 State 的基本使用

1. 什么是 State

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

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

• 基本用法： store 的实例对象

 // 全局共享的数据，都存储到 state 这个对象中
  state: {
    count: 0
  },

2. 组件访问 State 数据

2.1 第一种方式

• 在每个 Vue 组件中，可以通过 this.$store.state.全局数据名称 访问 Store 中的数据。

2.2 第二种方式

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

1. 按需导入一个辅助函数 mapState

import { mapState } from 'vuex'

2. 把 Store 中指定的数据，映射为当前组件的计算属性

//mapState(['全局数据的名字', '全局数据的名字'])
  computed: {
    // ...obj
    // ...result
    ...mapState(['count'])
  },

• 结论：在实际开发中，不要在组件中直接修改全局的数据

• 原因：会导致 vue-devtools 调试工具失效，无法检测到 vuex 中数据的变化

• 通过 this.$store.commit() 就可以调用到指定名称的 mutation 函数

• 通过 this.$store.dispatch('action函数的名字') 函数，

 this.$store.commit('add', 1)
 // 可以调用指定名称的 action 函数
 this.$store.dispatch('addAsync', 2)

• 在组件使用 State 中数据的两种方式分别是什么？
  1. this.$store.state.数据项的名字
  2. mapState 辅助函数 + computed 计算属性

2.3 拓展：mapState 辅助函数的原理

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

//#region 注释
// mapState(['全局数据的名字', '全局数据的名字'])
// 调用结果 {count: ƒ}
// 2. 把 Store 中指定的数据，映射为当前组件的计算属性

// const result = mapState(['count'])
// console.log(result)

// const obj = {
//   // 自定义计算属性，名字叫做 count
//   count() {
//     // 在计算属性中，必须 return 一个计算的结果
//     return this.$store.state.count
//   }
// }
//#endregion

export default {
  name: 'Left',
  // 计算属性
  computed: {
    // ...obj
    // ...result
    ...mapState(['count'])
  },

11.3 Mutation 的基本使用

1. 怎样修改 State 中的数据

• 请大家思考：我们能否在组件中直接修改 Vuex 中的数据？

• 结论：能直接修改，但是不推荐！Vuex 官方也禁止我们直接修改！
• 原因：会导致修改来源不明确的问题，不利于调试和后期的维护。

2. Mutation 是什么

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

• 特点：想要修改 State 中的数据，只能调用 Mutation 方法！

• 好处：能够确保修改来源的唯一性，方便调试和后期维护。

3. State、组件、Mutation 之间的关系

• State：全局存储共享数据的地方
• Vue 组件：使用数据的地方
• Mutation：专门负责修改 State 中的数据

4. Mutation 的使用步骤

1. 在 Vuex 中定义 Mutation 方法
2. 在组件中调用 Mutation 方法 this.$store.commit('方法名')
   

  // 专门用来修改全局的数据
  mutations: {
    // 1. mutation 必须是函数
    // 2. 第一个形参，永远都是 state
    add(state, n) {
      state.count += n
    }
  },

• 注意：
  1. mutation 必须是函数
  2. 第一个形参，永远都是 state

4.1 载荷（Payload）

• Vuex 中的载荷就是参数的意思，通过载荷可以提高 Mutation 方法的通用性。例如：
  1. 第一个形参，永远都是 state
  2. 第二形参，Payload来传递调用者传递过来的参数

##### 4.2 提交载荷（Payload）

• 在组件中，可以通过 this.$store.commit() 方法的第二个参数来提交载荷（参数），示例代码如下：

5. mapMutations 辅助函数

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

• mapMutations 辅助函数的用法示例

11.4 Action 的基本使用

1. Mutation 必须是同步函数

• 在项目开发中，为了保证 Store 中状态的每一次变化都是可追踪的
• Vuex 规定： Mutation 必须是同步函数。否则，vue-devtools 将无法正常追踪 Store 中数据的变化，这对大型项目的开发调试是灾难性的！

2. Action 是什么

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

• Action 把异步操作的结果，转交给 Mutation，由 Mutation 负责修改数据源。

3. 定义 Action 方法

4. 调用 Action 方法

4.1 第一种方式

• 在组件中，通过 this.$store.dispatch('xxx') 方法，即可触发指定名称的 Action 方法。示例代码如下：

 // 可以调用指定名称的 action 函数
      this.$store.dispatch('addAsync', 2)

1. 在 Action 方法中定义载荷
   • 在 Action 方法中，可以通过第二个形参的位置来定义载荷参数。示例代码如下：
     

 // 定义一个异步自增的函数
    // action 函数的第一个形参，永远都是 ctx,
    // ctx 就是 new 出来的 store 实例对象
    addAsync(ctx, n) {
      // 1. 延迟1秒
      setTimeout(() => {
        // 2. 调用 add 这个 mutation 函数
        // ctx.commit() 函数的作用，就是调用指定名称的 mutation
        ctx.commit('add', n)
      }, 1000)
    }

2. 调用 Action 方法时提交载荷

• 通过 this.$store.dispatch() 方法的第二个参数，即可提交载荷。示例代码如下：

4.2 第二种方式

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

• mapActions 辅助函数的用法示例

11.5 Getter 的基本使用

1. 组件中计算属性的局限性

• 组件中的计算属性复用性比较低。例如：

• 如果有多个组件需要用到此计算属性，我们需要在多个组件之间复制、粘贴这个函数。

2. Getter 是什么

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

3. 定义 Getter 方法

4. 访问 Getter

4.1 第一种方式

• 在组件中，可以通过 this.$store.getters.xxx 来访问指定 getter 的值。示例代码如下：

4.2 第二种方式

• 基于 mapGetters 辅助函数，可以把 store 中的 getter 映射为当前组件的计算属性。示例代码如下：

11.6 Module 的基本使用

1. 思考：当前遇到的问题

• 所有的全局数据、方法都集中在了一起，导致 Vuex 的结构混乱，不利于现阶段的开发和后期的维护。

2. Module 是什么

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

3. 定义模块

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

4. 注册模块

• 注意：

1. 拆了模块之后，一定要在 store/index.js 中，对模块进行组装，否则模块不会生效
2. 只要拆模块了，必须开启命名空间

    namespaced: true,

3. 在 vuex 独立的模块中，state 不能是对象，必须是 function

// 计数器的 vuex 模块
export default {
  // 注意：只要拆模块了，必须开启命名空间
  namespaced: true,
  // 在 vuex 独立的模块中，state 不能是对象，必须是 function
  state() {
    return {
      // 在这里定义数据
      count: 0,
      total: 9
    }
  },
  mutations: {
    show() {
      console.log('这是【计数器模块】中的show函数')
    },
    add(state, n) {
      state.count += n
    }
  },
  actions: {
    addAsync(ctx, n) {
      setTimeout(() => {
        ctx.commit('add', n)
      }, 1000)
    }
  }
}

5. namespaced（命名空间）

• namespaced（命名空间）可以解决不同模块之间成员名称冲突的问题。在实际项目开发中，建议为每个 Module 模块都开启命名空间！
• 在定义模块时，只需在模块的根节点中声明 namespaced: true 选项，即可为当前模块开启命名空间：

6. 访问Module

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

• 当模块启用了 namespaced: true 选项之后，模块就有了自己的命名空间。
• 此时，模块内的成员需要通过模块的注册名称才可以访问到。示例代码如下：

6.2 访问命名空间下的 state 数据

• 在组件中访问命名空间下的 state 数据时，建议使用 mapState 函数来简化访问的过程。示例代码如下：

6.3 访问命名空间下的 mutation 方法

• 在组件中访问命名空间下的 mutation 方法时，建议使用 mapMutations 函数来简化访问的过程：

6.4 访问命名空间下的 action 和 getter

• 建议使用 mapActions 和 mapGetters 函数来简化访问的过程，示例代码如下：