做vue项目的时候， store状态管理器可以帮助我们完成一些数据的存储和管理，通俗理解是存储在store里的都是全局变量，可以通过方法提交更新，其他页面和组件也会同步更新，拿到最新的值。

一、Vuex的安装与配置

方法	描述
state	状态树：定义需要管理的数组、对象、字符
getters	类似计算属性，当需要从store的state中派生出一些状态，就需要使用getter，getter会接受state作为第一个参数，而getter的返回值会根据它的依赖缓存起来，只有getter中的依赖值发生改变才回重新计算。
mutation	更改store中state状态的唯一方法就是提交mutation。每个mutation都有一个字符串类型的事件和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到更新。
2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交（commit）mutation。

1. 安装vuex支持

npm install vuex --save

注意：
Vue 3 匹配 Vuex 4

npm install vuex@4 --save

Vue 2 匹配 Vuex 3

npm install vuex@3 --save

卸载vuex

npm uninstall vuex --save

2. 在src下创建store文件夹，建立store/index.js --> 在 index.js 中引入vue 和 vuex
   • 引入vue 和 vuex，并使用 Vue.use(Vuex) 【☆☆☆☆☆】
   • 创建state和mutations
   • export导出Vuex.Store 实例

初始代码

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const state = {username: '牛牛',
}
const mutations = {setUser(state, name) {state.username = name},
}
export default new Vuex.Store({state,mutations
})

3. 在main.js配置，这样就可以全局引入了，省的每个要使用的页面单独在引入。

import Vue from 'vue'
import App from './App.vue'import VueRouter from 'vue-router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index.js';
import axios from 'axios';import './mock/index.js';
import '@/assets/css/global.css';
import store from './store/index.js';Vue.config.productionTip = false;
Vue.prototype.$axios =axios;
Vue.use(ElementUI);
Vue.use(VueRouter);new Vue({router,store,render: h => h(App),
}).$mount('#app')

二、store使用方法

1、基础使用

语法：$store.state.XXX（XXX属性名）

页面代码，我是以Main2.vue作为基础操作的

<template><div><span>这是Main2</span><br /><br /><h1>{{ $store.state.username }}</h1></div>
</template><script>
export default {name: "Main2",
};
</script><style scoped>
</style>

页面效果

2、提交变更

使用方法 commit ，语法如下：

this.$store.commit('提交方法名',数据);

在store.js中一个状态字段 userState 和提交的方法 setUserState

页面代码修改

<template><div><span>这是Main2</span><br /><br /><h1>{{ $store.state.username }}</h1><br />数据状态：{{ $store.state.userState }}<el-button @click="addState">状态+1</el-button></div>
</template><script>
export default {name: "Main2",methods: {addState() {this.$store.commit("setUserState", 1);},},
};
</script><style scoped>
h1,
.el-button {height: auto;
}
</style>

页面效果

3、getters使用

对数据进行修饰，比如上例中的用户状态，我们假设如下：
0 ：无效
1 ：1级
2 ：2级
…

在 store/index.js 增加getters进行数据的修饰并导出getters，全部代码如下：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const state = {username: '牛牛',userState: 0
}
const mutations = {setUser(state, name) {state.username = name},setUserState(state, data) {state.userState += data},
}
const getters = {getUserState(state) {let data;if (state.userState == 0) {data = '无效'} else {data = state.userState + '级'}return data;}
}export default new Vuex.Store({state,mutations,getters
})

页面代码修改

页面效果

4、在其他页面（组件）中显示

直接在footer 页面加入显示即可
数据状态：{{$store.state.userState}}

<template><div>store/index.js 来的数据：{{ $store.state.userState }}</div>
</template><script>
export default {name: "Footer",
};
</script><style scoped>
</style>

更新state中的状态时都会同步更新：

5、modules多模块

1. 在store下创建文件夹 module ，并建立两个文件 moduleA.js moduleB.js
   

2. moduleA.js 定义state 的username 为 module_a_user，同理，moduleB.js为 module_b_user

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {username: "module_a_user"},mutations: {},getters: {}
})

3. 在store.js中创建modules并导出
   
4. 代码示例

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './module/moduleA.js';
import moduleB from './module/moduleB.js';Vue.use(Vuex)const state = {username: '牛牛',userState: 0
}
const mutations = {setUser(state, name) {state.username = name},setUserState(state, data) {state.userState += data},
}
const getters = {getUserState(state) {let data;if (state.userState == 0) {data = '无效'} else {data = state.userState + '级'}return data;}
}const modules = {a:moduleA,b:moduleB
}export default new Vuex.Store({state,mutations,getters,modules
})

页面使用：
语法：$store.state.模块名.字段名

module用户a：{{$store.state.a.username}}
<br>
module用户b：{{$store.state.b.username}}

页面效果

操作全部代码，仅供参考

Main2.vue参考代码

<template><div><span>这是Main2</span><br /><br /><h1>{{ $store.state.username }}</h1><br />数据状态：{{ $store.state.userState }}<el-button @click="addState">状态+1</el-button><br /><br />计算数据状态：{{ $store.getters.getUserState }}<br /><br />module用户a：{{ $store.state.a.username }}<br />module用户b：{{ $store.state.b.username }}</div>
</template><script>
export default {name: "Main2",methods: {addState() {this.$store.commit("setUserState", 1);},},
};
</script><style scoped>
h1,
.el-button {height: auto;
}
</style>

store/index.js代码在5.4小节中已经全部提供，往上翻一下
store/module/moduleA.js代码在5.2小节中已经全部提供，往上翻一下

---

Vuex状态管理store的用法就介绍到这啦~~