Vuex3的简介与使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它为应用程序中的所有组件提供了一个简单的全局状态管理器。使用 Vuex，我们可以轻松地管理应用程序中的各种状态，例如登录状态、用户信息、购物车中的商品数量、商品列表等等。下图是Vue2.js对Vuex3官方的原理图解释：

 

Vuex 主要由以下四个部分组成：

1. state：用于存储应用程序中的所有状态；

2. mutations：一种更改状态的方式，必须是同步函数；

3. actions：用于处理异步操作和提交 mutations；

4. getters：用于从 state 中派生出一些状态

Vuex的使用步骤如下：

1. 定义State：创建一个包含所有应用级别状态的State对象；
2. 定义Mutation：创建一个修改State的Mutation对象；
3. 定义Action：创建一个异步Action对象，通过提交Mutation来实现对State的更新；
4. 定义Getter：创建一个Getter对象，用于从State中派生出计算属性；
5. 注册Vuex：将State，Mutation，Action，Getter注册到Vuex中；
6. 在Vue组件中使用：通过Vuex提供的mapState、mapMutation、mapAction、mapGetter方法，将Vuex中的状态和方法映射到组件中，实现组件和Vuex之间的数据交互。

 

以下是一个简单的 Vuex 示例：

1. 首先，需要安装 Vuex：

   npm install vuex --save
    
   

2. 创建一个 Store 实例：

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment(state) {
         state.count++;
       },
       decrement(state) {
         state.count--;
       }
     },
     actions: {
       increment(context) {
         context.commit('increment');
       },
       decrement(context) {
         context.commit('decrement');
       }
     },
     getters: {
       getCount(state) {
         return state.count;
       }
     }
   });
   
   export default store;
    
   

3. 在 Vue 组件中使用该 Store：

   <template>
     <div>
       <h3>当前计数：{{ count }}</h3>
       <button @click="increment">+1</button>
       <button @click="decrement">-1</button>
     </div>
   </template>
   
   <script>
   import { mapGetters, mapActions } from 'vuex';
   
   export default {
     computed: {
       ...mapGetters(['getCount']),
       count() {
         return this.getCount;
       }
     },
     methods: {
       ...mapActions(['increment', 'decrement'])
     }
   };
   </script>
    
   

在该组件中，我们使用了 Vuex 提供的 mapGetters 和 mapActions 帮助函数将 Store 中的状态和方法映射到组件中。