Vuex的快速使用及配合浏览器存储

0. Vuex的介绍:

a. 前端的公共仓库

b.官方介绍:

1. Vuex是一个专为vue.js应用程序开发的状态管理模式。

2. 当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。

c. vuex3.x的介绍

• state，驱动应用的数据源；(仓库)
• view，以声明方式将 state 映射到视图；(进行存储的时候，需要写函数事件)
• actions，响应在 view 上的用户输入导致的状态变化。(调用函数)

一. 在项目中快速使用

1. 安装

ps:这里有个坑

a. 如果你的vue-cli是2.x的你需要装vuex3.x的，

b. 默认下载的是最新版的

c. 最新版的是4.x的，需要vue-cli3.x版本才可以用

d. 这里提供vuex3.x的安装以及使用(@后面是版本号的意思)

cnpm install -S vuex@3.6.0

2. 在mian.js中导入

// 2
import Vuex from 'vuex'

Vue.use(Vuex)

3. 在src下创建一个文件夹store，在store下创建一个index.js

目录结构：src/store/index.js

在创建的index.js写上以下代码

// 3
import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
  // 数据仓库,类似vue组件里面的data
  state: {
    count:0
  },
  // 数据操作方法,类似vue里面的methods
  mutations: {
    // state就是上面的state,val 是调用的时候，传的参数
    add_count(state,val){
      state.count = val
    },
  }
});

4. 在mian.js中导入并挂载

// 4  3.6.0
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})

5. 使用

a. 存值

// 赋值到vuex--->使用  3--->被我们定义的函数中val所接收
this.$store.commit('add_count', 3)

b. 取值

{{ $store.state.count}}

ps:解释以下为什么一会用this，一会又不用

a. 我们存值一般都在js代码里面存，所以必须加一个this指向当前调用者

b. 取值在视图中(html)，vue规定，在视图中(html)使用函数以及数据可以省略this

二. 配合浏览器存值&取值

a. 原因:vuex是的数据是放置在内存中的，你一刷新，数据就会丢失，因为内存重新加载

b. 在刷新之前放置即可(在App.vue里面写一个create)

created() {
    // 监听页面刷新事件，将数据保存到sessionStorage中
    window.addEventListener('beforeunload', () => {
      console.log('页面要刷新啦！！！,赶紧保存数据！！！！');
      sessionStorage.setItem('count', this.$store.state.count);
    })

  }

c. 页面刷新的组件里面(比如头部组件)，从sessionStorage.cart_length || localStorage.cart_length中取值

created() {
    this.get_cart_length();
  }

 methods: {
          get_cart_length() {
      // 从session中获取数据
      let cart_len = sessionStorage.cart_length || localStorage.cart_length
      // 赋值给vuex
      this.$store.commit('add_count', 10)
    },
  },