Vuex

2020-01-18

字数统计: 866字 | 阅读时长: 3分

状态管理与 VueX（跨组件共享数据）

vuex 顾名思义是一款为 vue 而生的状态管理工具。
vue 本身自带着 store 模式，其实就是全局注册一个对象，实现数据共享。适合小型数据量少的项目。
vuex 适合复杂的单页面应用，涉及到多层次嵌套，多层次组件传值，不同视图对一个状态或者接口的处理。
vuex 工作原理
vue工作原理

安装与使用

npm install –save vuex

vuex 的五大核心

State

vuex 中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state 来获取我们定义的数据；

Getters

Getter 相当于 vue 中的 computed 计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被
重新计算，这里我们可以通过定义 vuex 的 Getter 来获取，Getters 可以用于监听、state 中的值的变化，返回计算后的结果

Mutations

数据我们在页面是获取到了，但是如果我们需要修改值怎么办？如果需要修改 store 中的值唯一的方法就是提交 mutation 来修改

Actions

官方并不介意我们这样直接去修改 store 里面的值，而是让我们去提交一个 actions，在 actions 中提交 mutation 再去修改状态值，

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

vuex 辅助函数

mapState 、mapGetters 、 mapMutations 、mapActions

调用	方法	方法
state	this.$store.state	mapState
getters	this.$store.getters	mapGetters
mutations	this.$store.cmmit	mapMutations
actions	this.$store.dispatch	mapActions

mapState和mapGetter的使用只能在 computed 计算属性中，
mapMutations和mapActions使用的时候只能在 methods 中调用否则报错

简单的示例

index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    num: 1,
  },
  getters: {
    getstateNum(state) {
      return state.num + 1;
    },
  },
  mutations: {
    //根据action commit的type类型匹配进行操作
    add(state) {
      state.num = state.num + 1;
    },
    reducer(state) {
      state.num = state.num - 1;
    },
  },
  actions: {
    //执行对应操作
    addfun(context) {
      //commit一个type类型
      context.commit("add");
    },
    reducerfun(context) {
      context.commit("reducer");
    },
  },
  modules: {},
});

app.vue

<template>
  <div id="app">
    <h2>直接从store获取的num{{this.$store.state.num}}</h2>
    <h2>执行了Getters获得取num{{this.$store.getters.getstateNum}}</h2>
    <button @click="add">+</button>
    <button @click="reducer">-</button>
</template>
<script>
export default {
  methods: {
    add() {
      //派发action
      this.$store.dispatch("addfun")
    },
    reducer() {
      this.$store.dispatch("reducerfun")
    }
  }
};
</script>

使用辅助函数简化代码

<template>
  <div id="app">
    <h2>直接从store获取的num{{num}}</h2>
    <h2>执行了Getters获得取num{{getstateNum}}</h2>
    <button @click="add">+</button>
    <button @click="reducer">-</button>
</template>
<script>
import { mapState  , mapActions , mapGetters  } from 'vuex';
export default {
  computed:{
    ...mapState({
      num:(state)=>state.num
    })
    ...mapGetters({
      getstateNum:"getstateNum"
    })
  },
  methods: {
    ...mapActions({
        addfun:"addfun",
        reducerfun:"reducerfun"
    }),
    add(){
      this.addfun()
    },
    reducer() {
    this.reducerfun()
    }
  }
};
</script>