vuex学习笔记（一看就会）

介绍vux

vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护

vuex的组成

1.state: 存放状态，例如你要存放的数据
2.getters： 计算属性，可以通过this.$store.getters来获取存放在state里面的数据3.mutations：改变状态，唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit()
4.actions: 异步操作，异步的mutations，可以通过dispatch来分发从而改变state
5.modules：模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

vuex的使用

1.安装vuex依赖包

npm install vuex@next --save
//官网 https://vuex.vuejs.org/zh/

2.建立stoar文件夹里面放index.js

// 导入vuex 创建实例方法
import { createStore } from 'vuex'
// 创建实例对象
const store = createStore({
state() {
return {
// 共用属性：用户信息
userInfo: {}
}
},
mutations: {
// 共用方法： 设置用户信息
setUserInfo(state, user) {
state.userInfo = user
}
}
})
// 导出数据对象
export default store

3.全局引用vuex文件(main.js中)

//导入文件
import store from './store'
//挂载使用
app.use(store)

4.在页面使用（我这里写的是Login.vue向用户页面传值）

Login.vue页面

//引入useStore函数
import { useStore } from "vuex";
//声明useStore方法
const store = useStore();
// 登录成功后获取用户信息
getUserInfo().then((res2) => {
// console.log(res2);
//将登录成功后获取用户信息存入到store共用方法的setUserInfo方法中
store.commit("setUserInfo", res2);
});

用户页面 直接获取

<template>
<!-- 使用store属性中userInfo数据 -->
<div>{{ $store.state.userInfo }}</div>
</template>