14. vuex

第1步，数据定义

store/user.js

export default {
    namespaced: true, // 开启命名空间，开启后，在调用commit或者dispatch的时候，需要加上xxx/方法名
    state: {
        name: '',
    },
    getters: {
        getName: (state) => {
            return state.name;
        },
    },
    mutations: {
        setName(state, name) {
            state.name = name;
        }
    },
    actions: {
        async getUserName({ commit }) {
            // 模拟请求接口
            const res = {
                code: 0,
                data: {
                    name: 'tom'
                },
                msg: ''
            }
            commit('setName', res.data.name);
        }
    },
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        user
    }
})

第2步，在main.js注册

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

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

第3步，使用方法

<template>
  <div id="app">
    {{ getUserName }}
  </div>
</template>
<script>
export default {
  computed: {
    getUserName() {
      return this.$store.state.user.name;
    }
  },
  mounted() {
    this.$store.commit("user/setName", "marry");
    setTimeout(() => {
      this.$store.dispatch("user/getUserName");
    }, 2000);
  }
};
</script>