Oliver's Blog

Vuex使用

  • Jul 14, 2021

安装Vuex插件

Vuex3匹配Vue2

Vuex4匹配Vue3

npm i vuex@3

Vuex引入

在与main.js文件同级的目录下增加一个store文件夹

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import calculator from './calculator';
import person from './person';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    calculator,
    person
  }
});

main.js

将Vuex.Store实例对象放到Vue实例对象的store属性中

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Vuex模块

  • state 定义状态
  • actions 定义action，action通过调用mutation以修改state，并增加自己的额外操作
  • mutations 定义mutation，单纯修改state，不可增加异步操作
  • getters 定义getter，获取state时对state进行计算变换

此例中编写calculator和person两个模块

store/calculator,js

export default {
  namespaced: true,
  actions: {
    addWhenOdd(context, value) {
      if (context.state.sum % 2 == 1) {
        context.commit('ADD', value);
      }
    },
    addWait(context, value) {
      setTimeout(() => {
        context.commit('ADD', value);
      }, 1000);
    }
  },
  mutations: {
    ADD(state, value) {
      state.sum += value;
    },
    SUBSTRACT(state, value) {
      state.sum -= value;
    }
  },
  state: {
    sum: 0
  },
  getters: {
    sumMultipliesTen(state) {
      return state.sum * 10;
    }
  }
}

store/person.js

export default {
  namespaced: true,
  actions: {

  },
  mutations: {
    ADD_PERSON(state, value) {
      state.personList.unshift(value);
    }
  },
  state: {
    personList: []
  }
}

Vuex操作

直接调用mutation

this.$store.commit('calculator/ADD', this.operator);

调用action

this.$store.dispatch('calculator/addWhenOdd', this.operator);

访问state和getter

// 引入mapState和mapGetters
import {mapState, mapGetters} from 'vuex';

// mapState和mapGetters方法返回一个对象，将对象的属性都放到computed对象中
computed: {
  ...mapState('calculator', ['sum']),
  ...mapGetters('calculator', ['sumMultipliesTen'])
}


<template>
  <div>
    <h1>
      当前求和为：{{sum}}
    </h1>
    <h3>
      当前求和放大十倍后为：{{sumMultipliesTen}}
    </h3>
  </div>
</template>

完整例子

  import {mapState, mapGetters} from 'vuex';
  export default {
    name: 'Calculator',
    data() {
      return {
        operator: 1
      }
    },
    methods: {
      clickAdd() {
        this.$store.commit('calculator/ADD', this.operator);
      },
      clickSubstract() {
        this.$store.commit('calculator/SUBSTRACT', this.operator);
      },
      clickAddWhenOdd() {
        this.$store.dispatch('calculator/addWhenOdd', this.operator);
      },
      clickAddWait() {
        this.$store.dispatch('calculator/addWait', this.operator);
      }
    },
    created() {
    },
    computed: {
      ...mapState('calculator', ['sum']),
      ...mapState('person', ['personList']),
      ...mapGetters('calculator', ['sumMultipliesTen'])
    }
  };
Search