vue的状态管理模式—vuex

1.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.详细介绍可以参照官网文档vuex.vuejs.org/zh/

2.什么情况下我应该使用 Vuex？

当项目遇到以下两种场景时

• 多个组件依赖于同一状态时。
• 来自不同组件的行为需要变更同一状态。

3.安装

npm install vuex --save

然后配置 vuex，使其工作起来：在src路径下创建store文件夹，然后创建index.js文件，文件内容如下：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // 共享数据源
  state: {
    age: "18",
  },
  //定义方法 只支持同步请求
  mutations: {},

  //action触发的mutations方法 优势是异步处理，不能直接修改state里面的数据

  actions: {},

  // 模块化
  modules: {},
});

修改main.js：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store"; // 引入我们前面导出的store对象


Vue.config.productionTip = false;

new Vue({
  router,
  store,//放到这里面
  render: (h) => h(App),
}).$mount("#app");

4.接下来就是我们在组件中如何去使用使用map辅助函数

我们在组件里引入

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

4.1 mapState方法该方法就可以自动将需要的state值映射为实例的计算属性

computed: {
// 使用对象展开运算符将此对象混入到外部对象中
      ...mapState(['age'])
 },

4.2 mapGetters辅助函数

mapGetters函数具有mapState的作用，而且其主要用法也是一样的，也能将getters的属性映射到实例的计算属性 getters可以传参，这是getters和mapState的区别

computed: {
    ...mapGetters(['realName','myMoney'])
 },

4.3 mapmutations

mutations需要通过commit来调用其里面的方法，它也可以传入参数，第一个参数是state，第二个参数是载荷（payLoad//任意名字），也就是额外的参数

我们只能通过mutation去更改state里面的值

 methods: {
      ...mapMutation(['addFun']),
  }

mutations: {
    addFun(state, val) {
      state.list.push(val);
    },
  },

4.4 mapActions

action可以提交mutation,然后mutation去更改state

methods: {
      ...mapActions(['addFunAsyns']),
  }

 mutations: {
    addFun(state, val) {
      state.list.push(val);
    }
  },
  actions: {
    addFunAsyns(context, val) {
      context.commit("addFun", val);
    }
  },

总结：

• action可以提交mutation,然后mutation去更改state
• action不要直接去操作state，而是去操作mutation
• action包含异步操作，类似于axios请求，可以都放在action中写
• action中的方法默认的就是异步，并且返回promise