Vue2使用Vuex

安装

Vue2 的项目需要安装 Vuex@3, Vue3 的项目需要安装 Vue@4

sudo yarn add vuex@3

创建 Vuex 文件夹及文件

// src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user1: "Vuex",
    user2: "xiaodongxier",
  },
  mutations: {},
  actions: {},
  modules: {},
});

main.js 文件引入 Vuex 文件

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

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import Vuex from 'vuex';
Vue.use(Vuex);

Vue.config.productionTip = false

// 引入 Vuex 文件
import store from './store'

new Vue({
  render: h => h(App),
  // 引入 Vuex 文件
  store
}).$mount('#app')

使用

<template>
  <div class="hello">
    {{ user1 }}
    <hr>
    {{ user2 }}
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  computed: {
    ...mapState([
      'user1'
    ]),
    user2 () {
      return this.$store.state.user2
    },
  },
};
</script>

<style scoped>
/*  */
</style>

其他

在Vue组件中，可以通过几种方式访问和使用 Vuex store 中的状态：

在计算属性中使用 $store.state：

computed: {
  count() {
    return this.$store.state.count;
  }
}

使用辅助函数 mapState：

import { mapState } from 'vuex';

export default {
  computed: mapState({
    count: state => state.count
  })
}

如果你的 store 中包含 getters，你可以使用 $store.getters 访问它们：

computed: {
  doubleCount() {
    return this.$store.getters.doubleCount;
  }
}

同样可以使用 mapGetters 辅助函数：

import { mapGetters } from 'vuex';

export default {
  computed: mapGetters([
    'doubleCount' // 映射 this.doubleCount 为 store.getters.doubleCount
  ])
}

在真实项目中，我们通常会选择使用 mapState 和 mapGetters，这样可以使组件代码更清晰，更容易维护。并且，当 store 中的状态结构变化时，只需要在一个地方进行更新。

对于 actions，我们可以使用 this.$store.dispatch('actionName') 来分发 action，或者使用 mapActions 辅助函数。

对于 mutations，我们可以使用 this.$store.commit('mutationName') 来提交 mutation，或者使用 mapMutations 辅助函数。