一.何为vuex

是专门为 Vue.js 应用程序开发的一种状态管理模式，它采用集中式存储管理应用的所有组件的状态，什么是状态管理模式，指的是把组件的共享状态抽取出来，以一个单例模式去进行管理。应用的场景有：单页面应用中，组件之间的数据状态管理，应用的实例有1.购物车2.登录状态记录，下单页面如果有选择优惠券的一个按钮，点击进入优惠券页面后，在选择商品后返回下单页面，数据会有一个绑定的状态，显示已选择使用过的优惠券.

vuex在vue框架的store文件下面， 有五种属性，分别为：有五种，分别是 State、 Getter、Mutation 、Action、 Module.

属性名	作用/辅助函数/取值方式
State	存储数据和状态（ mapState 辅助函数）在计算属性computed里面进行取值
Getter	就是store的计算属性，对state里面的状态进行过滤处理（mapGetters辅助函数）在计算属性computed里面进行取值
Mutation	定义方法对store数据进行修改，mutation 必须是同步函数（mapMutations辅助函数），在methods里面取方法,需要同actions里面的异步触发才可以使用.
Action	将mutations里面处理数据的方法变成可异步的处理数据的方法（ mapActions  辅助函数），methods里面取方法.
Module	将分成的模块的名称写入里面记得要先引入在填写

若想实现数据的持久化

[点击该链接:(www.npmjs.com/package/vue…)]

实现步骤:

1. npm i vuex-persistedstate先安装插件

2.引入 import createPersistedState from "vuex-persistedstate"

3.在modules下面填写此段代码

plugins: [
    createPersistedState({
      storage: window.localStorage, //该处可以是localStorage也可以是sessionStorage
    }),
  ],

二.示例模板

1.使用vuex实现简单的数据加加减减实现步骤如下：

export default {
  state: {
    num: 1,
  },
  getters: {},
  mutations: {
    // 加加
    addNum(state, val) {
      state.num++;
    },
    // 减减
    decNum(state, val) {
      if (state.num <= 0) {
        state.num = 0;
      } else {
        state.num--;
      }
    },
  },
  actions: {
    addNumAsync({ commit }, val) {
      commit("addNum", val);
    },
    decNumAsync({ commit }, val) {
      commit("decNum", val);
    },
  },
  namespaced: true,  //**切记要使用命名空间**
};

<template>
  <div>
    <p>{{num}}</p>
    <button @click="addFun">点击我数量加加</button>
    <button @click="decFun">点击我数量减减</button>
  </div>
</template>

<script>
// 使用辅助函数将值取出来
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    // 取出来num模块里面的num值
    ...mapState("num", ["num"])
  },
  created() {
    console.log(this.num);
  },
  methods: {
    ...mapActions("num", ["addNumAsync"]),
    ...mapActions("num", ["decNumAsync"]),
    // 点击数量加加
    addFun() {
      this.addNumAsync();
    },
    // 点击数量减减
    decFun() {
      this.decNumAsync();
    }
  }
};
</script>

通过以上代码可以实现一个加加减减的小案例，如果要取得是某个模块里面的数据语法格式为...mapState("num", ["num"])，取方法也同理.

三.同步方法和异步方法之间的互相调用

1.如果在actions里面解构了就可以这样写：

2.如果在actions里面没有解构了就可以这样写：

3.异步调用另一个模块的异步和同步并且没有模块名

 1.异步调用同步
      commit("addFruits", val, { root: true });
 2.异步调用异步
       dispatch("addFruitsAction", val, { root: true });

4.异步调用另一个模块的异步和同步并且有模块名

 1.异步调用同步
      commit("user/getBbb", val, { root: true });
 2. 异步调用同异步
      dispatch("user/getAaa", val, { root: true });

以上是小编的简介，欢迎评论共同进步! 驻足阅读一番哦！