Vuex实践之modules方式

Posted 2020-12-16 zhuji

1 HelloVuex.vuex 

 1 <template>
 2   <div>HelloVuex
 3     <button @click="ClickSetHandler">Vuex SET</button>
 4     <button @click="ClickGetHandler">Vuex GET</button>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   data() {
11     return {
12       cityItems: ["上海", "北京", "广州", "深圳"]
13     };
14   },
15   methods: {
16     ClickSetHandler() {
17       //实践Vuex之将值保存到localStorage中
18       this.$store.dispatch("setCityItem", this.cityItems); //到basicData.js中actions属性coding setCityItem
19     },
20     ClickGetHandler() {
21       //实践,获取Vuex之前保存在localStorage的相应的值
22       this.$store.dispatch("getCityItem");
23       let cityitem = this.$store.getters.city_item;//理解$store.getters的默认行为
24     }
25   }
26 };
27 </script>

 2. srcstoreindex.js 

 1 import Vue from ‘vue‘;
 2 import Vuex from ‘vuex‘;
 3 import book from ‘./modules/book‘;
 4 import basicData from ‘./modules/basicData‘;
 5 import getters from ‘./getters‘;
 6 Vue.use(Vuex);
 7 
 8 const store = new Vuex.Store({
 9   modules:{
10     book,
11     basicData
12   },
13   getters
14 })
15 
16 export default store

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

3. srcstoremodulesasicData.js 

 1 //此处使用Web Storeage API 进行数据存储, 参考 srcutilslocalStorageExpire.js
 2 const basicData = {
 3   state: {
 4     //从html5的localStorage中取值, localStorage 属于 HTML5 JS API 而 getExpire是自定义扩展函数参考localStroageExpire.js
 5     city_item: localStorage.getExpire("CityList") ? JSON.parse(localStorage.getExpire("CityList")) : [] //这种设计待理解: 为this.$store.getters.city_item;
 6   },
 7   mutations:{
 8     SET_CITYITEM : (state,cityItems) =>{ //必须2个函数, 理解state参数的作用? state就是第3行属性所引用的值,这些都是约定行为
 9       localStorage.setExpire("CityList", JSON.stringify(cityItems));//自定义封装Storeage,set,get 方法
10     },
11     GET_CITY_ITEM: (state, CityItem) => {
12       state.city_item = CityItem;
13     },
14   },
15   actions:{
16     setCityItem:({
17       commit
18     },cityItems) => {
19       return commit(‘SET_CITYITEM‘,cityItems) //会到mutations属性中调用SET_CITYITEM方法, 所以coding 对应的 SET_CITYITEM 函数,将数据存到localStorage中,SET_CITYITEM函数必须有设计2个参数
20     },
21     getCityItem:({commit}) => {
22       //localStorage 是 Storage 属于HTML 5 知识范畴
23       if(localStorage.getExpire(‘CityList‘)) {
24         commit(‘GET_CITY_ITEM‘, JSON.parse(localStorage.getExpire("CityList")))
25       }
26     }
27   }
28 }
29 
30 export default basicData

4. srcstoregetters.js 

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

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

5. srcutilslocalStorageExpire.js 

 1 //Vuex使用Web Storeage API 进行数据存储, 所以要知道Storage 官网API 在哪里,为什么有这个API
 2 //在main.js 中引入
 3 Storage.prototype.setExpire = (key, value, expire=24 ) => {
 4     let obj = {
 5     data: value,
 6     time: Date.now(),
 7     expire: expire * 1000*60*60
 8     };
 9     //localStorage 设置的值不能为对象,转为json字符串
10     localStorage.setItem(key, JSON.stringify(obj));
11 }
12 
13 Storage.prototype.getExpire = key => {
14     //debugger
15     let val = localStorage.getItem(key);
16     if (!val) {
17         return val;
18     }
19     val = JSON.parse(val);
20     if (Date.now() - val.time > val.expire) {
21         localStorage.removeItem(key);
22         return null;
23     }
24     return val.data;
25 }

6. srcmain.js 

 1 import ‘@/utils/localStorageExpire‘  //或‘utils/localStorageExpire‘, 所以一定要注意路径
 2 import Vue from ‘vue‘
 3 import App from ‘./App‘
 4 import router from ‘./router‘
 5 //状态管理
 6 import store from ‘./store‘;
 7 Vue.config.productionTip = false
 8 
 9 /* eslint-disable no-new */
10 new Vue({
11   el: ‘#app‘,
12   router,
13   store,//为Vue增加vuex状态管理
14   components: { App },
15   template: ‘<App/>‘
16 })