小白整理了VUEX

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

1.Vuex是什么？

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

2.Vuex中有哪些对象？

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

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

  plugins: [

    // ...

  ],

  actions: {

    someAction({ rootState, commit, dispatch }) {

      // ...

    },

  },

  mutations: {

    someMutation(state, { rootState }) {

      // ...

    },

  },

3.从定义层面使用Vuex

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');

组件中使用getters

computed: {

    //函数形式的 getters 调用

    addNum() {

        return this.$store.getters.getCountByParam(2);

    },

    //对象形式的 getters 调用

    getNum() {

        return this.$store.getters.getCount;

    }

    //getters不是必须的

    num() {

        return this.$store.state.count

    }

}

触发Mutations、Actions

//在Vue组件中通过 commit 方法触发Mutations来修改状态

methods: {

    increment() {

      this.$store.commit('increment');

    },

    decrement() {

      this.$store.commit('decrement');

    },

    //带参数的increment

    incrementByParam() {

      this.$store.commit('incrementByParam', 5);

    },

    incrementAsync() {

      this.$store.dispatch('incrementAsync');

    },

    incrementAction() {

      this.$store.dispatch('increment');

    }

}

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

初级：使用模块分割

**store.js:**

```javascript

import Vue from 'vue';

import Vuex from 'vuex';

import userModule from './user';

Vue.use(Vuex);

export default new Vuex.Store({

  modules: {

    user: userModule,

  },

});

```

**user.js:**

```javascript

export default {

  namespaced: true,

  state: {

    username: '',

    email: '',

  },

  mutations: {

    setUsername(state, payload) {

      state.username = payload;

    },

    setEmail(state, payload) {

      state.email = payload;

    },

  },

  actions: {

    updateUser({ commit }, payload) {

      commit('setUsername', payload.username);

      commit('setEmail', payload.email);

    },

  },

  getters: {

    getUserName: state => state.username

  }

};

```

**组件中的使用示例：**

```javascript

computed: {

  username() {

    return this.$store.state.user.username;

  },

  username2() {

    //如果使用了模块命名空间，就需要采用this.$store.getters['module/getterName']的方式来访问getter函数；

    //如果没有使用模块命名空间，可以直接通过this.$store.getters.getterName访问getter函数

    return this.$store.getters['user/getUserName']

  }

},

methods: {

  updateUser() {

    this.$store.dispatch('user/updateUser', { username: 'John', email: 'john@example.com' });

  },

},

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

store.js

import Vue from "vue";

import Vuex from "vuex";

import loggerPlugin from './plugins/logger';

//以下五个文件是当前目录下state、getters、mutations、actions分割出来后的文件

import state from "./state";

import getters from "./getters";

import mutations from "./mutations";

import actions from "./actions";

Vue.use(Vuex);

const myPlugin = store => {

  store.subscribe((mutation, state) => {

    // 在这里可以监听 mutation 的变化和访问 state

  });

};

//下面是将整个模块分割出来

import moduleCard from "xxx/cart/moduleCart.js"

import module2 from "xxx/xxx/module2.js"

import { module3 } from "已安装组件"

export default new Vuex.Store({

  namespaced: true,

  state,

  getters,

  mutations,

  actions,

  plugins: [loggerPlugin, myPlugin],

  modules: {

    cart: moduleCart,

    moduleName2: module2,

    //这个代码片段中的 ...module3 是使用 ES6 的扩展运算符将 module3 模块中的内容解构到 modules 对象中。

    //这样做可以方便地将 module3 模块的 state、mutations、getters 和 actions 添加到 Vuex 的模块集合中。

    ...module3,

  },

  //在 Vue.js 中，strict 是一个用于开启严格模式的选项。当 strict 设置为 true 时，Vuex 的状态变更会被严格监测，以便捕捉到状态的不合规变更。

  //在你提供的代码中，process.env.NODE_ENV !== "production" 是一个条件判断语句，它用于根据当前运行环境来确定是否开启严格模式。通常，在开发环境中，我们会将 process.env.NODE_ENV 设置为 "development"，而在生产环境中会设置为 "production"。

  //当 process.env.NODE_ENV !== "production" 为 true 时，说明当前不处于生产环境，此时 strict 会被设置为 true，即开启严格模式。这样做的目的是为了方便在开发阶段捕捉到状态变更的错误，以及进行更加详细的状态变更追踪和错误提示。

  //一般来说，建议在开发环境中开启严格模式，而在生产环境中关闭严格模式，以获得更好的性能和体验。这可以通过构建工具（如 webpack）来设置 process.env.NODE_ENV 的值来实现。

  strict: process.env.NODE_ENV !== "production",

});

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

moduleCart.js

 import state from "./moduleCartState.js";

import mutations from "./moduleCartMutations.js";

import actions from "./moduleCartActions.js";

import getters from "./moduleCartGetters.js";

export default {

  namespaced: true,

  state: state,

  mutations: mutations,

  actions: actions,

  getters: getters,

};

moduleCartActions.js

在actions中可以使用store，以使用已存状态数据

import store from "../store.js";

export const addToCart = ({ commit }, product) => {

  commit('addProduct', product);

};

export const removeFromCart = ({ commit }, productId) => {

  commit('removeProduct', productId);

};

//或者下面方式

export default {

    addToCart({ commit }, product) {

        commit('addProduct', product);

    },

    removeFromCart({ commit }, product) {

        commit('removeProduct', productId);

    },

    //包含辅助对象的action，使用`rootState`来访问根模块的状态，使用`state`来访问当前模块的状态

    addToCart2({ commit, rootState, state }) {

      commit('addProduct', product);

      console.log(rootState); // 访问根模块的状态

      console.log(state); // 访问模块的状态

    },

     removeFromCart2({ commit, rootState }) {

      commit('removeProduct', productId);

      console.log(rootState); // 访问根模块的状态

    },

}

moduleCartGetters.js

export const cartProducts = state => state.products;

export const totalItems = state => state.products.length;

或者

export default {

    cartProducts：state => state.products,

    totalItems: state => state.products.length，

    cartProducts2(state, getters, rootState, rootGetters) {

      console.log(rootState); // 访问根模块的状态

      console.log(rootGetters); // 访问根模块的getters

      return state.products;

    },

};

moduleCartMutations.js

 export const addProduct = (state, product) => {

  state.products.push(product);

};

export const removeProduct = (state, productId) => {

  state.products = state.products.filter(p => p.id !== productId);

};

或者

import Vue from "vue";

export default {

    addProduct(state, product) {

        Vue.set(state, "products", product);

    },

    removeProduct(state, productId) {

        Vue.set(state, "products", state.products.filter(p => p.id !== productId))

    }

}

moduleCartState.js