vue实战问题2：模块化使用vuex

一般在项目中，普通的组件传值可能不够用了，你就会想到要是有个变量的仓库，让我们能直接用这些变量多好，这个时候选择合适的状态管理模式尤为重要

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，当然了vuex还是略显笨重的，可以根据自身的项目选择使用vuex还是使用总线bus

1、安装并引入vuex

npm install vuex --save

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

Vue.config.productionTip = false

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

使用Vue CLI可视化创建的小伙伴们修改下store的路径，默认路径是./store

安装过程更具体的可以参考官网https://vuex.vuejs.org/zh/installation.html

2、创建store

项目目录.jpg

创建一个store文件夹，作为我们的状态管理库，按照自己的模块创建modules文件夹，我写的demo是创建了一个user.js当作用户模块的

index.js

//index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        //用户模块
        user
    }
})

mutation-types.js是区分mutation的模块类型的，一个模块可能看不出多大的作用，当然模块多了的话是很好管理的

//mutation-types.js
//user
export const RECEIVE_USER_INFO = 'RECEIVE_USER_INFO';

重点在user.js,state中是你放在state上用户模块的变量，mutations是commit提交改变变量的操作

//user.js
import * as types from '../mutation-types';
//initial state
const state = () => ({
    userInfo: null,
});
//getters
const getters = {
    getUserInfo: store => store.userInfo,
}
//mutations 
const mutations = {
    [types.RECEIVE_USER_INFO](store, userInfo) {
        store.userInfo = userInfo || null;
    },
}
//actions
const actions = {
    getUserInfo({
        commit
    }) {

    },
    login({
        commit
    }) {

    }
}
export default {
    state,
    getters,
    actions,
    mutations
}

项目跑起来，你就能看到user模块了

store.jpg

let info = {
      name: "zhangsan",
      age: 18
};
this.$store.commit("RECEIVE_USER_INFO", info);

commit你的userInfo看看成果吧，小伙伴们觉得有帮助的话可以点个赞呦