小白整理了VUEX

在小白开发的项目中前端使用的是Vue，虽然在日常工作中可以使用Vue进行开发工作。但是没有系统的学习过Vue，对Vue的一些特性和方法使用时常常需要查询资料解决问题，查询资料常常会占用大量时间，尤其对Vuex的使用。虽然可以通过很多Vue框架中带有的Vuex框架直接使用，但是用的越多，小白就会觉得越混乱、越不明白，只知其用不知其意。于是小白决定系统学习一下Vuex，来补充一下Vue知识。

1.Vuex是什么？

Vuex是一个用于Vue.js应用程序的状态管理模式。它可以集中管理Vue应用程序中的所有组件的状态，并提供了一种机制来保持状态的一致性和可追踪性。

2.Vuex中有哪些对象？

一个Vuex模块中通常包含以下五个对象：namespaced、state、mutations、actions 和 getters。这些对象分别用于定义模块的命名空间、状态、变更操作、异步操作和计算属性。

除了这五个对象，还有一些其他可选的对象可以在模块中使用：

modules：如果你的模块需要进一步细分为子模块，可以使用 modules 对象来组织和嵌套这些子模块。
plugins：你可以使用 plugins 数组来安装Vuex插件，这些插件可以监听活修改状态的变化。
actions的辅助对象：在 actions 中，你可以定义 root 、rootState 、commit 、dispatch 等参数，来访问根模块的状态和调用根模块的 mutations 和 actions。
mutations的辅助对象：在 mutations 中，你可以定义 rootState 参数，来访问根模块的状态。

  plugins: [
    // ...
  ],

  actions: {
    someAction({ rootState, commit, dispatch }) {
      // ...
    },
  },

  mutations: {
    someMutation(state, { rootState }) {
      // ...
    },
  },

3.从定义层面使用Vuex

安装Vuex：使用npm或yarn安装Vuex。
创建一个state：在你的Vue应用程序中创建一个 store 文件夹，并在其中创建一个 store.js 文件。
定义状态（State）：在 store.js 文件中，定义一个包含需要共享的状态的对象。
定义mutations：在 store.js 文件中，定义一系列用于修改状态的mutations函数。每个mutation函数接收一个state对象作为参数，并根据需要修改状态。
定义actions：在 store.js 文件中，定义一系列用于处理异步操作的actions函数。每个action函数可以调用一个或多个mutations函数来修改状态。
定义getters：在 store.js 文件中，定义一系列用于获取state对象的“getters普通对象形式”或用于获取state的计算属性“getters函数”，可以通过“getters”来定义state状态的衍生值或计算属性并获取。getters不是必须的。
注册store：在你的Vue应用程序的入口文件（main.js）中，导入 store.js 并使用Vue.use()方法注册Vuex。
在组件中使用状态：使用 this.$store.state 来访问状态，使用 this.$store.commit() 来调用mutations，使用 this.$store.dispatch() 来调用actions。
示例如下：

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++;    
      },
      decrement(state) {
        state.count--;
      },
      incrementByParam(state, amount) {
        state.count += amount;
      },
      decrementByParam(state, amount) {
        state.count -= amount;
      }
    },
    actions: {
      increment(context) {
        context.commit('increment');
      },
      incrementAsync(context) {
        setTimeout(() => {
          context.commit('increment');
        }, 1000);
      },
      decrement(context) {
        context.commit('decrement');
      }
    },
    getters: {
      // 对象形式的getters，允许以属性的方式访问计算后的值，而无需调用函数
      getCount: state => state.count,
      // 函数形式的getters，可以接受额外的参数，并根据传入的参数进行计算返回结果
      getCountByParam: (state) => (num) => {
        return state.count + num;
      }
    }
})

main.js

 import store from "xxxxx/store";

new Vue({
  store,
  // ...其他Vue应用程序的配置...
}).$mount('#app');

4.项目中使用时，为了项目的扩展性，通常使用Vuex模块来分割和组织状态，如果使用了模块分割需要注意模块命名空间。下面是使用模块的初级示例，其中getters演示了命名空间的使用。

5.真实的项目我们可能需要多个modules，并且每个modules中getters、mutations、actions 和 state 通常会变得非常大，所以它们也需要用单个文件分割。

下面用moduleCart作为示例来演示一个Vuex模块中五个对象的分割： namespaced，state，mutations，actions 和 getters。创建一个文件夹名为cart，在文件夹中创建五个文件分别为moduleCart.js、moduleCartActions.js、moduleCartGetters.js、moduleCartMutations.js和moduleCartState.js

以上就是小白用心整理的Vuex的内容，通过整理小白对Vuex有了更多的了解，之前小白不理解不明白的地方明，现在明白了。小白会在编码的路上继续努力、继续加油！

BOBO~