30.VueJS学习-Vue Store(Vuex)

在 Vue 中，Vue Store（通常也称为 Vuex）是一个专为 Vue.js 应用程序开发的状态管理模式和库。

一、主要作用

1.集中管理状态

• 它允许你将应用的全局状态集中存储在一个地方，使得状态的管理更加清晰和可维护。比如在一个大型的单页应用中，可能有多个组件都需要访问用户信息、购物车数据等，通过 Vuex 可以方便地统一管理这些状态，避免了在多个组件中重复定义和传递这些数据。

2.实现状态的可预测性

• Vuex 中的状态更改只能通过提交 mutations 来实现，这使得状态的变化可以被追踪和调试，保证了状态的变化是可预测的。当应用变得复杂时，这有助于快速定位问题和理解状态的变化流程。

二、核心概念

1.State

• 存储应用的状态数据。例如，存储用户登录状态、商品列表等。你可以通过 this.$store.state 来访问状态。

2.Mutations

• 用于更改状态的方法，只能是同步操作。提交 mutations 是更改 Vuex 状态的唯一方法。例如，当用户登录成功后，可以通过提交一个 mutation 来更新用户的登录状态。

3.Actions

• 可以包含异步操作，例如发送 API 请求。Actions 可以提交 mutations 来间接更改状态。比如，在 actions 中发起一个获取商品列表的异步请求，请求成功后提交一个 mutation 来更新商品列表的状态。

4.Getters

• 可以理解为计算属性，用于从 state 中派生出一些状态。例如，可以通过 Getters 计算购物车中商品的总价。

三、使用步骤

1.安装Vuex

• 使用 npm 或 yarn 进行安装：npm install vuex 或 yarn add vuex。

2.创建Store

• 引入 Vuex 并创建一个 store 对象，定义 state、mutations、actions 和 getters。

  import Vuex from 'vuex';
  
  const store = new Vuex.store({
      state: {
          count: 0
      },
      mutations: {
          increment (state) {
              state.count++
          }
      },
      actions: {},
      getters: {}
  });

3.在 Vue 应用中注册 Store

• 在 Vue 实例中通过 store 选项注册 store 对象

  new Vue({
      el: '#app',
      store,
      // ...
  })

4.在组件中使用 Store

• 在组件中可以通过 this.$store 来访问 store 中的状态、提交 mutations 和调用 actions。

  <template>
      <div>
          <p>Count: {{ count }}</p>
          <button @click="increment">Increment</button>
      </div>
  </template>
  
  <script>
  
      export default {
          computed: {
              count () {
                  return this.$store.state.count;
              }
          },
          methods: {
              increment () {
                  this.$store.commit('increment');
              }
          }
      };
  </script>

  Vuex 为 Vue 应用提供了一种有效的状态管理解决方案，尤其适用于中大型应用，有助于提高代码的可维护性和可扩展性。