Vuex的使用

Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
好处:定义全局变量,让其在各个页面上实现数据的共享包括状态，并且可操作

存储组件的状态包括:
 

export default {
	namespaced: true,//开启命名空间,防止变量或方法重名
	state: {//state类似于vue页面中的 data{}
		score: 10000,
		rank: 100
	},
	getters: {//计算属性,当state改变时,计算出最新值到页面去
		rank(state) {
			return Math.floor(state.score / 10);
		}
	},
	mutations: {//改变state的唯一方式
		SET_SCORE(state, data) {
			state.score = data;
		}
	},
	actions: {//actions动作 异步,延迟方法,不能直接修改state 提交mutation，可以包含异步操作   
 //异步的赋值（但是其实就是在Mutations的基础上包装了一层）
		login(context) {
			alert("我是test的login");
			context.commit("SET_SCORE", 2048);
		}
	},
    modules:{
        Module将vuex进行分模块
    }
}

在项目中安装和配置 Vuex
进入项目目录，安装包（这里说明一下，如果是vue2的项目，那么就需要按照下面的指定版本号，如果是vue3不需要指定版本号，直接npm i vuex就可以了）

npm install vuex@3.6.2 -S

与router一样，当我们在项目中使用vuex之后，为了方便代码维护，我们一般需要做特殊的目录调整，约定的结构如下：

 

 

 在store/index.js 中放置具体的代码
 

在src/main.js中：

1. 导入store
2. 并注入Vue实例

 

 如果自定义安装Vue安装了vuex就不用再配置了

个个组件之间的使用:

在组件中，通过this.$store.state.属性名来访问。

在模板中，则可以省略this而直接写成： {{$store.state.属性名}}
或
使用 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性:

写在组件页面的计算属性内:

computed: { 
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}
定义好之后直接用 新名字就可以访问 全局变量

调用Mutations修改公共数据:

直接使用 this.$store.commit('mutation名'， 载荷) 来调用

或

使用Vuex 提供的 mapMutations 辅助函数，可以方便的把 Store 中指定的方法，映射为当前组件的 methods

methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}

注意：Mutation 必须是同步函数，Mutation 里面不能放异步代码


调用actions执行异步函数:

直接使用：在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

或
 使用Vuex 提供的 mapActions 辅助函数，可以方便的把 Store 中指定的 Action，映射为当前组件的 methods:
 

methods: { 
    ...mapActions(['actions名']),
     ...mapActions({'新名字': 'actions名'}) 
}

 modules来拆分复杂的业务

所有的全局数据、方法都集中在了一起，导致 Vuex 的结构混乱，不利于现阶段的开发和后期的维护

modules的作用

拆分模板，把复杂的场景按模块来拆开

使用了modules之后，在访问数据时就要额外添加modules的名字了。

结论： 在使用modules时，建议都给加上namespaced!