Vue项目中如何使用Vuex进行全局管理

Vue项目中有一些交互和数据通信比较复杂的地方，需要用到一个全局状态管理，那么他就可以使用Vuex；（Vuex官方文档链接 ）首先我们来看下Vuex的基本使用方法如下：

1. 第一步安装Vuex，在Vue项目中安装Vuex的依赖包；

# npm
npm install vuex@next --save
# yarn
yarn add vuex@next --save
1
2
3
4

2. 在项目的src文件内新建一个store的文件夹用于存放状态管理的数据，新建一个index.js的文件作为输出，建一个modules的文件夹将状态管理做模块化拆分；

# 文件目录
src/
 | - store/
 |    |- modules/
 |    |    |- login.js
 |    |    |- user.js
 |    |- index.js
 
1
2
3
4
5
6
7
8

3. Vuex中状态管理模块执行过程描述大致如下：

// index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import loginfrom './modules/login';
Vue.use(Vuex);

const store = new Vuex.Store({
   namespaced: true,
   state: {
   	 test： 'Hello'
   },
   // 管理模块
   modules: {
   	user,
   	login,
   },
});

export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// user.js
// 声明初始值状态值
const state = {
  isLogin: false, // 用户是否登录
};
// 获取状态值
const getters = {
  getIsLogin(state) {
  	return state.isLogin;
  },
};
//  设置状态值
const mutations = {
  IS_LOGIN(state, data) {
  	state.isLogin= data;
  },
};
// 同步修改状态值
const actions = {
  setIsLogin({ commit }, data) {
  	commit('IS_LOGIN', data);
  },
};

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

4. 接下来，如何在其他文件中获取Vuex并且设置它的值：

// login.vue
import { mapGetters, mapActions } from 'vuex';
computed: {
   ...mapGetters(['isLogin']), // 获取Vuex的值
 },
 mounted() {
	if (this.isLogin) {
   	    // 登陆后操作 todo....
    }
 },
 methods: {
    ...mapActions(['setIsLogin']),
    login() {
   	  // 登录成功
   	  const loginStatus = true; 
   	  // ...
   	  if (loginStatus)  this.setIsLogin(true); // 设置Vuex的值
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

最后一点，也比较重要，Vuex在刷新的时候存在状态丢失的情况，这个需要做Vuex持久化处理，这个持久化处理一般就是把数据存储在LocalStorage中；如果项目是使用服务端渲染则不能做持久化，在服务端不能访问LocalStorage对象，这里面有一些细节大家可以多多琢磨。