vuex的进阶用法，由浅入深，详细解析

近几年基本都在写vue项目，vuex在每个项目中都会遇到，每次都是按照语法匆匆用，先实现需求，完成工作，用的也不是很规范，设计的也不是很合理，有一般的普通用法，也有高级用法，今天决定彻底搞懂各种用法后，仔细梳理出来。

作为一个圈子中的人，决定输出一下文档，如果你仔细看完这篇文章，保证你对vuex熟练掌握。

1.先说一下vuex到底是什么？

vuex是一个专门为vue框架开发的管理状态模式，可以理解为在data中的属性，需要共享给其他组件使用的部分，使用vuex进行统一管理。

2.vuex中，有默认的五种基本的对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

下面我们正式开始，一步步来使用vuex:

在vue项目的src目录下创建store文件夹，文件夹的目录按上面红框里的建出来就可以了~~~

3.引入vuex，我们需要先下载vuex，并且引入它

在编辑器的终端里 输入npm install vuex --save 指令，安装vuex

安装成功后，在store文件夹的index.js入口文件中引入：

// 入口

import Vue from "vue";

import Vuex from "vuex";

import state from "./state";

import mutations from "./mutations";

import user from "./modules/user";

import getters from "./getters";


Vue.use(Vuex);


const store = new Vuex.Store({

  modules: {

    user

  },

  state,

  mutations,

  getters

});


export default store;

4.接着，在main.js里引入store，全局引入：

import Vue from "vue";

import App from "./App.vue";

import router from "./router/index";

import store from "./store/index";

// 第三方包

import "element-ui/lib/theme-chalk/index.css"; //element-ui样式

import ElementUI from "element-ui";


Vue.config.productionTip = false;


Vue.use(ElementUI);


new Vue({

  router,

  store,

  render: h => h(App)

}).$mount("#app");

采坑注意事项：import store from "./store/index"; 一定要这样写，省略index，项目运行会报错，找不到vuex里所有的选项，以为项目会自己找到index这个入口文件,实际上并没有，看到文档的大家注意了~~~~喇叭

5.继续操作store文件夹

我们在state.js文件中,定义一个testData测试数据，并做缓存处理，这样的需求适合项目常用的token处理：

//存储数据

//  默认测试数据

const defaultTestData = "周六";

try {

  if (localStorage.testData) {

    defaultTestData = localStorage.testData;

  }

} catch (error) {}


export default {

  isCollapse: false, //是否折叠菜单

  testData: defaultTestData //测试数据

};

6.我们在mutations.js文件中，该对象中有一个个方法，用来改变state里定义的值，这里也做了缓存处理

export default {

  //  是否折叠菜单

  collapseMenu(state) {

    state.isCollapse = !state.isCollapse;

  },


  //改变测试数据的方法

  CHANGE_TEST_DATA(state, newTestData) {

    state.testData = newTestData;

    try {

      localStorage.testData = newTestData;

    } catch (error) {}

  }

};

7.在vue组件或者页面中，调用测试数据testData，使用它，

html中：

 <div>今天是{{ testData }}</div>

script中：

import { mapState } from 'vuex'

  computed: {

    // vuex 获取state 里的值

    ...mapState(['testData']),

  },

这样就可以取到值了，这个用的mapState的高级用法，是语法糖

或者this.$store.state.testData也可以取到值，这就是普通用法，2种用一种就可以了

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

8.vuex中模块化的用法：

在store文件夹中，建modules文件夹，这里面管理所有模块，例如我们建一个user.js文件，

我们把用户信息都在这里储存，登录接口和登出接口也可以再这里调用。

// 用户信息

const user = {

  state: {

    userInfo: { name: "韩梅梅", age: 20 } //用户信息

  },

  mutations: {

    SET_USER_INFO(state, userInfo) {

      state.userInfo = userInfo;

    }

  },


  // 改变的方法

  actions: {

    setUserInfo({ commit }, userInfo) {

      commit("SET_USER_INFO", userInfo);

    }

  }

};


export default user;

解析：每个文件储存  state、mutations、actions，全部写完，其中state存值userInfo用户信息、mutations里是改变值的方法、actions是异步改变的方法，可以调用登录接口拿到用户信息赋值。

9.接着在getters.js中取我们的state，因为它算是state的一个计算属性

const getters = {

  userInfo: state => state.user.userInfo

};


export default getters;

到这里，如果全都看懂了，vuex你已经没有压力了。

10.在vue组件或者页面中，使用userInfo的用法如下：

1.取userInfo的值普通用法：

  computed: {

    // vuex取值普通用法

     userInfo() {

       return this.$store.getters.userInfo

     }

  },

html中的用法，直接用就可以了

 <div>{{ userInfo.name }},今年{{ userInfo.age }}</div>

2.取userInfo的值的高级用法：

import {  mapGetters} from 'vuex'

  computed: {

       // vuex取值高级用法 mapGetters 

    ...mapGetters(['userInfo'])

  },

html中的用法，直接用就可以了

 <div>{{ userInfo.name }},今年{{ userInfo.age }}</div>

11.在vue组件或者页面中，用Actions改变userInfo值的方法，这个是异步的

1.在methods直接写改变方法，然后在mounted中调用

  mounted() {

// 调用action普通用法

    this.setUserInfoUsed();

  },

  methods: {

  // actions 改变vuex中的值 普通用法

    setUserInfoUsed() {

      this.$store.dispatch('setUserInfo', { name: '张无忌', age: 26 })

    },

}

普通用法需要 this.$store.dispatch改变值，第一个参数是mutauions中封装的改变方法名，第二个参数是新值。

2.mapActions改变值的高级用法：

import {  mapActions} from 'vuex'

 data() {

    return {

      params: { name: '赵敏', age: 26 }

    }

  },

  mounted() {

// 调用action高级用法

     this.changeData(this.params);

  },

  methods: {

    // mapActions 高级用法 步骤1 

    ...mapActions({

      changeData: 'setUserInfo'

    }),

   // mapActions高级用法 步骤2 

    changeData(...params) {

      return this.$store.dispatch.apply(this.$store, ['setUserInfo'].concat(params))

    },

}

解析：changeData是改变值的方法，高级用法扩展的时候需要用键值对的形式绑定，如果键值一样也可以直接下写一个，这里为了区分，写了不一样的方法名。

这个就不需要dispatch方法了，不过个人认为，普通用法根据简洁，不用引用和扩展，2种方法都能实现，这个随大家心情，都可以用~~~~

12.在vue组件或者页面中，用Mutations改变userInfo值的方法，这个是同步的

1.在methods直接写改变方法，然后在mounted中调用  

mounted() {

  // 调用mutations 普通用法

     this.setNewData();

  },

  methods: {

    // mutations提交改变值的方法 普通用法

    setNewData() {

      this.$store.commit('SET_USER_INFO', { name: '令狐冲', age: 27 })

    },

}

普通用法需要 this.$store.commit改变值，第一个参数是mutauions中封装的改变方法名，第二个参数是新值。

2.mapMutations改变值的高级用法：

import { mapMutations} from 'vuex'

 data() {

    return {

       params2: { name: '任盈盈', age: 18 },

    }

  },

  mounted() {

 // 调用mutations 高级用法

    this.setNewDataHeight(this.params2);

  },

  methods: {

  // mutations提交改变值的方法 高级用法 temp1

    ...mapMutations({ 'setNewDataHeight': 'SET_USER_INFO' })

   // mutations提交改变值的方法 高级用法 temp2

    setNewDataHeight(obj) {

      return { name: obj.name, age: obj.age }

    },

}

解析：setNewDataHeight是改变值的方法，高级用法扩展的时候需要用键值对的形式绑定，如果键值一样也可以直接下写一个，这里为了区分，写了不一样的方法名。

这个就不需要commit方法了，不过个人认为，普通用法根据简洁，不用引用和扩展，2种方法都能实现，这个随大家心情，都可以用~~~~

以上就是vuex的普通用法和高级用法了，进阶的话就用高级用法，当然普通用法也能满足项目需求，最后，如果大家发现有什么问题，或者错误的地方，欢迎留言交流~~~~

---

当你的才华还撑不起你的野心的时候，你就应该静下心来学习；当你的能力还驾驭不了你的目标时，就应该沉下心来，历练；梦想，不是浮躁，而是沉淀和积累，只有拼出来的美丽，没有等出来的辉煌，机会永远是留给最渴望的那个人。