在操作大量数据时若直接在组件中定义变量，会让代码变得庞大，且不便于操作，因此可以用Vuex。

案例：判断用户是否登录，登录后跳转到个人界面显示信息

1 store/index.js

在store文件夹中创建index.js文件,

2 store/modules

mutaitions-types.js定义方法名并暴露

存储变量及方法

state.userInfo=user这里是用户的全部信息

3 登录组件

点击登录后触发login方法，在login中获取用户信息。

使用Vuex中的方法 需要引用import { mapMutations } from "vuex";

然后在methos方法中...mapMutations(["mutaitions-types.js定义的方法名"]),这样就可以在其他方法中调用了

向后端发送请求，得到返回值res，执行LOGIN方法，将res.data作为参数，根据上面的LOGIN方法可知，它可将用户信息本地存储，且登陆状态为true，代表登录。这样在浏览器的应用中的本地存储空间中则会多一条信息

4 个人信息

查看个人信息需要看是否为登录状态，就可获取本地存储空间的信息判断。 获取数据需要引入mapState，然后再computed获取，在html可使用{{userInfo.tel}}等渲染到页面

5 购物车

在购物车组件中获取购物车的数据。

前端发送请求，带参数token，将从后端取得数据传达store中存储，赋值给state.list，为购物车数据，然后...mapState({ list: (state) => state.cart.list }),

二次封装axios时查看是否有token，有则复制 接收前端传的token然后解析获取用户信息进行查询

使用

进入网页后是否有账号登录

created就调用INIT_USER方法（APP.vue）

取获取本地存储空间存账号的信息，名为teaUserInfo

若有则给state赋值，为登录状态