一般在项目中，普通的组件传值可能不够用了，你就会想到要是有个变量的仓库，让我们能直接用这些变量多好，这个时候选择合适的状态管理模式尤为重要
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看看成果吧，小伙伴们觉得有帮助的话可以点个赞呦
