Vuex的使用

Vuex是专门在Vue中实现集中式状态（数据）管理的一个Vue插件，他是一种组件间通信的方式，适用于任意组件之间的通信

安装

下载

在Vue2中安装Vuex

npm install vuex@3 --save

在Vue3中安装Vuex

npm install vuex@next --save

安装

在scr下创建store/index.js

import Vue from 'vue'; // 引入Vue
import Vuex from 'vuex'; // 引入Vuex
Vue.use(Vuex); // 安装Vuex
​
const actions = {};
​
const mutations = {};
​
const state = {};
​
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

在main.js中引入store

import Vue from 'vue';
import App from './App.vue';
import store from '@/store'; // 引入store
​
Vue.config.productionTip = false;
​
new Vue({
  render: h => h(App),
  store,
}).$mount('#app');

使用

原理图

Actions相当于餐厅的服务员处理业务逻辑，Mutations相当于后厨，是真正State中的数据人，State相当于菜。

若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

简单的案例

App.vue

<template>
  <div id="app">
    
    <h1>当前值：{{ $store.state.count }}h1>
    <TheButton>TheButton>
  div>
template>
​
<script>
import TheButton from "@/components/TheButton.vue";
export default {
  name: "App",
  components: { TheButton },
};
script>
​
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
style>

子组件

<template>
  <div id="the-count">
    <button @click="add">count++button>
    <button @click="sub">count--button>
    <button @click="addDelayed">延迟3s加button>
  div>
template>
​
<script>
export default {
  name: "TheCount",
  methods: {
    // 组件中修改Vuex中的数据 $store.commit('mutations中的方法名',数据) 简单逻辑跳过dispatch，直接进行commit
    add() {
      this.$store.commit("add", 1);
    },
    sub() {
      this.$store.commit("sub", 1);
    },
    // 组件中修改Vuex中的数据 $store.dispatch('action中的方法名',数据) 一般用于有发送ajax请求的逻辑处理
    addDelayed() {
      this.$store.dispatch("addDelayed", 1);
    },
  },
};
script>
​
<style>
style>

store/index.js

import Vue from 'vue'; // 引入Vue
import Vuex from 'vuex'; // 引入Vuex
Vue.use(Vuex); // 安装Vuex
​
const actions = {
  // 处理大量业务逻辑，例如发送ajax
  addDelayed(state, value) {
    setTimeout(() => {
      // 为了区分actions和mutations建议大写方法名
      state.commit('ADDDELAYED', value);
    }, 3000);
  },
};
​
const mutations = {
  add(state, value) {
    console.log(state, value);
    state.count += value;
  },
  sub(state, value) {
    console.log(state, value);
    state.count -= value;
  },
  ADDDELAYED(state, value) {
    console.log(state, value);
    state.count += value;
  },
};
​
const state = {
  count: 0,
};
​
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

getters的使用

当state中的数据需要经过加工后再使用时，可以使用getters加工。

同actions、mutations、state一样

......
// 创建getters配置项
const getters = {
    bigCount(state){
        return state.count * 10
    }
}
​
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters // 添加getters
});

组件中读取数据：$store.getters.bigCount

四个map方法的使用

在组件中导入

import { mapActions, mapGetters, mapMutations, mapState } from "vuex";

1. mapState方法：用于帮助我们映射state中的数据为计算属性

   computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   ​
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   ​
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
   }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。