你真的会用vuex吗？

不得不说，vuex真实一个非常好用的库，在vue中起着举足轻重的作用，那么，vuex的作用是什么呢？作为一个新手，我们关心的是在什么样的场景下，应该请出vuex这个大杀器。

vuex的作用

当然，我这里肯定不会给你讲官话，我将的只可能是基于实践中自己的感受，vuex实际上就是多页面共享数据仓库。是的，这就是我的vuex的理解，在我们开发也许需求的时候，不可避免的我们需要在多页面之间共享一些数据，比如用户基本信息，比如，省份城市列表等等，活在在举出一个例子，比如电商网站，用户的购物车数据，是的，这些数据都是要在所有页面中能个随时拿随时取的。好，我们不免有一个问题要问，难道我们就非得要使用vuex吗？

非得需要使用vuex来共享数据

这个答案明显是不一定的，官方也有着其建议，比较小的项目，本身的业务逻辑也不是很复杂，也不存在居多页面之间的交互，逻辑在怎么乱也乱不到哪里，因此是没有比较引入vuex的，一个简单的 store 模式就足够您所需了，嗯，没错，实际上只有中大型项目才有引入vuex的必要，所以说，引入vuex的另外一个不可忽视的原因是，代码解耦，扪心自问，页面的逻辑已经比较复杂了，有自己的数据，有跳转，有那么多的methods，computes，等等，已经受够了，还要去维护一个全局数据的管理，还要担心脏数据，真实受够了，这些交给一个专业的全局数据管理员多好呢？嗯，vuex就是你需要的这个管理者。

vuex三问

1. vuex数据存在什么地方
2. vuxe数据怎么修改
3. vuex是谁的

要弄懂这三个问题，我们直接就看一个vuex的实例就好了

Vue.use(vuex);
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

所以，直观的讲，数据是存在，state里面的，操作数据在什么地方，答案是放在actions中，具体到了业务怎么触发，则是使用dispatch，比如state.dispath('increment'),然而，那么mutations是干嘛的，呵呵，我也是觉得脱裤子放屁，多此一举，如果你和我们一样这么认为，很不幸，我们都理解错了，事实上，只有通过mutations里面的方法去修改state中存储的数据，这些数据的变化才可以被追踪。改变 store 中的状态的唯一途径就是显式地**提交 (commit) mutation**。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用这是官方原话，不按照这么做，妄图直接修改state中的变量，bug是一定会粗线的。

Action和mutation是很相似的，不同在于：

• Action 提交的是 mutation，而不是直接变更状态，这也就是以为这可以缓冲。
• Action 可以包含任意异步操作，所以耗时操作可以网这里丢。

第三问，这个仓库是属于谁的，这很重要，这就要看他如何挂载了。

export const vm = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

事实上，vuex属于这个vm实例这个实例的，所以，他存储的数据的只对目前这个vm负责，换句话说，你在起一个new Vue，不好意思，数据你拿不到，就好比进程隔离数据一样，这也就是业界说的对于多页面（开多个页面）的vue是共享不到数据的。

如图，vue的这棵树，可以理解app就是我们的vue实例，至于root是什么，我目前也不清楚，然后其他下面的都是可以认为是component，然后，顺理成章的来说，被这颗vue管理的这个vuex，被这棵树自己所共享，无论是更节点，还是叶子节点都是一样，能拿，能修改，router-view路由过去的也是如此，事实上你将其想成一个component即可。你router-view切换再多层次，千遍万变，你会发下App雷打不动，所以vue也是雷打不动。

所以，有人就问啊，为什么我的页面刷新一下，vuex存储的数据都丢了

所以，明白了上面的三问，这都不是一个问题了，因为刷新之后，vm会重新实例化，上一个vm的vuex中state怎么可能被你拿到呢？所以，关键是怎么办呢？很简单，使用sessionStorage来存储一下state状态，具体做法是：在App.vue中

<script>
  export default {
    name: 'App',
    methods: {
      store() {
        console.log('正在保存store的状态到sessionStorage')
        console.log(this.$store.state)
        sessionStorage.setItem("store", JSON.stringify(this.$store.state))
      }
    },
    created() {
      //在页面加载时读取sessionStorage里的状态信息,解决浏览器刷新之后vuex数据丢失的问题，导致需要重复请求网络
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
        console.log('正在从sessionStorage恢复store')
        console.log(this.$store.state)
      }

      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload", this.store)
    },
    destroyed() {
      window.removeEventListener("beforeunload", this.store)
    }
  }
</script>

那么，为什么不用localStorage，这个还是留给读者自己吧，别制作伸手党，自己也要有点思考。