Vuex——单页面状态管理

vuex如何进行单页面状态管理呐

vuex，这个状态管理，通俗的来讲就是储存一些公用的东西，提供各个组件使用，和服务器的session功能也很类似，不同的是，vuex在刷新页面的时候，会自动还原到初始状态!

关于vuex

vuex 的几个核心概念Store：Vuex 使用一个 Store 对象管理应用的状态，一个 Store 包括 State, Getter, Mutation, Action 四个属性。

1. State：State 意为“状态”，是 vuex 状态管理的数据源。
2. Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出。
   Mutation：Mutaion 是 vuex 中改变 State 的唯一途径（严格模式下），并且只能是同步操作。Mutaion 使得状态变得可追踪，配合一些 devtools 可以实现 time-travel 的调试体验。
3. Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态。
4. Module：当 Store 对象过于庞大时，可根据具体的业务需求分为多个 Module。

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。

下图是官方的联系图，就是在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面。

vuex解决跨组件的通信问题：1、父子之间通信 2、非父子之间通信
父子之间通信通过prop实现父组件向子组件传递数据，通过子组件中触发事件实现向父组件传递数据
非父子组件之间的通信一般都是通过一个vue实例作为中转站，也可以成为事件中心、event bus

第一步当然是需要安装vuex：npm install vuex --save

在main.js里面引入，

import Vue from 'vuex'
Vue.use(vuex)

3. 在根目录中新建vuex文件，建立文件store.js

sessionStorage本地储存

现在也有用sessionStorage储存信息的，但是用这个方法的话主要是对数据进行存储，但是在关闭浏览器窗口后，数据就会被删除。如果是不变的数据的话可以用本地数据代替vuex，但是当两个组件共用一个数据源，对象或数组的时候，如果一个组件改变了数据员，另一个要变化的时候，sessionStorage是无法做到的
用法：sessionStorage.setItem("lastname","www")
和vuex的区别：

1. vuex储存在内存，sessionStorage（会话储存），临时保存，只能存储字符串类型，对于复杂的对象可以使用ECMAscript提供的JSON对象和parse来处理
2. vuex用于组件传值，而sessionStorage主要是不同页面之间的传值

sessionStorage和vuex两者结合

片段代码展示

   const getDefaultState = () => {
    return {
        token: getToken(),
        name: "",
        avatar: ""
    };
};

const state = getDefaultState();

const mutations = {
    RESET_STATE: state => {
        Object.assign(state, getDefaultState());
    },
    SET_TOKEN: (state, token) => {
        state.token = token;
    },
    SET_NAME: (state, name) => {
        state.name = name;
    },
    // 保存用户信息
    SET_AVATAR: (state, avatar) => {
        state.userInfo = data;
    }
};
  login(_params)
                .then(response => {
                    const { data } = response;
                    commit("SET_TOKEN", data.token);
                    setToken(data.token);

                    //将登陆信息保存起来备用 
                    sessionStorage.setItem(
                        "loginAccount",
                        JSON.stringify(data.userAccount)
                    );
                    commit("_SET_URSER_INFO", data);
                    // console.log(data);
                    // debugger;
                    resolve();
                })
                .catch(error => {
                    reject(error);
                });