Vuex实践之modules方式

1 HelloVuex.vuex 

<template>
  <div>HelloVuex
    <button @click="ClickSetHandler">Vuex SET</button>
    <button @click="ClickGetHandler">Vuex GET</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityItems: ["上海", "北京", "广州", "深圳"]
    };
  },
  methods: {
    ClickSetHandler() {
      //实践Vuex之将值保存到localStorage中
      this.$store.dispatch("setCityItem", this.cityItems); //到basicData.js中actions属性coding setCityItem
    },
    ClickGetHandler() {
      //实践,获取Vuex之前保存在localStorage的相应的值
      this.$store.dispatch("getCityItem");
      let cityitem = this.$store.getters.city_item;//理解$store.getters的默认行为
    }
  }
};
</script>

 2. src\store\index.js 

import Vue from 'vue';
import Vuex from 'vuex';
import book from './modules/book';
import basicData from './modules/basicData';
import getters from './getters';
Vue.use(Vuex);

const store = new Vuex.Store({
  modules:{
    book,
    basicData
  },
  getters
})

export default store

第10行可忽略
第11行 对应 basicData.js

3. src\store\modules\basicData.js 

//此处使用Web Storeage API 进行数据存储, 参考 src\utils\localStorageExpire.js
const basicData = {
  state: {
    //从HTML5的localStorage中取值, localStorage 属于 HTML5 JS API 而 getExpire是自定义扩展函数参考localStroageExpire.js
    city_item: localStorage.getExpire("CityList") ? JSON.parse(localStorage.getExpire("CityList")) : [] //这种设计待理解: 为this.$store.getters.city_item;
  },
  mutations:{
    SET_CITYITEM : (state,cityItems) =>{ //必须2个函数, 理解state参数的作用? state就是第3行属性所引用的值,这些都是约定行为
      localStorage.setExpire("CityList", JSON.stringify(cityItems));//自定义封装Storeage,set,get 方法
    },
    GET_CITY_ITEM: (state, CityItem) => {
      state.city_item = CityItem;
    },
  },
  actions:{
    setCityItem:({
      commit
    },cityItems) => {
      return commit('SET_CITYITEM',cityItems) //会到mutations属性中调用SET_CITYITEM方法, 所以coding 对应的 SET_CITYITEM 函数,将数据存到localStorage中,SET_CITYITEM函数必须有设计2个参数
    },
    getCityItem:({commit}) => {
      //localStorage 是 Storage 属于HTML 5 知识范畴
      if(localStorage.getExpire('CityList')) {
        commit('GET_CITY_ITEM', JSON.parse(localStorage.getExpire("CityList")))
      }
    }
  }
}

export default basicData

4. src\store\getters.js 

const getters = {
  //获取基础数据城市列表
  city_item: state => state.basicData.city_item,  //理解是怎样运行的? 1).涉及 basicData.js的state属性; 2).$store.getters.city_item
  number: state => state.book.number  //默认行为:对应book.js中state属性
}
export default getters

第4行可忽略,与本篇无关

5. src\utils\localStorageExpire.js 

//Vuex使用Web Storeage API 进行数据存储, 所以要知道Storage 官网API 在哪里,为什么有这个API
//在main.js 中引入
Storage.prototype.setExpire = (key, value, expire=24 ) => {
    let obj = {
    data: value,
    time: Date.now(),
    expire: expire * 1000*60*60
    };
    //localStorage 设置的值不能为对象,转为json字符串
    localStorage.setItem(key, JSON.stringify(obj));
}

Storage.prototype.getExpire = key => {
    //debugger
    let val = localStorage.getItem(key);
    if (!val) {
        return val;
    }
    val = JSON.parse(val);
    if (Date.now() - val.time > val.expire) {
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

6. src\main.js 

import '@/utils/localStorageExpire'  //或'utils/localStorageExpire', 所以一定要注意路径
import Vue from 'vue'
import App from './App'
import router from './router'
//状态管理
import store from './store';
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//为Vue增加vuex状态管理
  components: { App },
  template: '<App/>'
})