Vue 之 Vuex，存储本地数据 并 保证刷新不丢失（ VueCli2+JavaScript 与 VueCli4+TypeScript中store写法的区别）

一、【VueCli3+】版本说明及需要安装的中间件，以下中间件没有的，就需要安装一哈子

具体代码开源到github，欢迎star

1.1、以下是 VueCli3+ 中的store (Vue + VueCli3 + TavaScript + iviewUI + Vuex)

    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.2",
    "vuex-persistedstate": "^2.7.0",
    "typescript": "~3.5.3",
    "view-design": "^4.0.2"

注意：`vuex-class` 和  `vuex-module-decorators` 两个装饰器中间件，二选一即可，此处用的 `vuex-class`；

         以下是两个装饰器的区别：

`vuex-class`（组件使用装饰器，即使用@State、@Action、@Getter等；store中使用Action和ActionTree等类）;
`vuex-module-decorators`（store中使用装饰器，即store文件中使用@Module、@Mutation、@Action等，通过getModule导出模块；  组件中通过导入模块调用对应的属性和方法，即模块.属性\模块.方法调用）; 

---

安装：

npm install vuex-class --save   # vuex装饰器（vue组件中使用@State、@Action、@Getter等）
npm install vuex-persistedstate --save # 保证vuex数据刷新不消失（默认刷新会消失）
npm install vuex-module-decorators --save # vuex装饰器中间件（store文件中使用@Module、@Mutation、@Action等）

 

 

二、【VueCli3+】封装store模块文件、actions文件、getters文件、mutation的types函数名文件等

---

2.1、在/src/store目录下，新建以下文件

【以下是页面展示图，其中搜索数据需要全局存储，即存储于Vuex中】

 

2.2、【封装搜索组件SearchForm】

 

2.3、首先看看【mutation-types.ts】文件的数据：定义了两个函数名，'SET_STATE_DATA'设置数据、'INIT_STATE'初始化数据

/**
 * @description [store.mutation] 对应的函数名
 * @author Hilary
 * @date 2019/11/09
 */
export const SET_STATE_DATA = 'SET_STATE_DATA'
export const INIT_STATE = 'INIT_STATE'

 

2.4、接着模块【search.ts】文件的数据：定义了两个接口、两个mutations方法、导出state、mutations；   此处其实就两个需要全局存储的数据，分别是date和name值

/**
 * @description [搜索模块] 数据表头部搜索需要的相关数据（日期、用户名等）
 * @author Hilary
 * @date 2019/11/09
 */

// import { Commit } from 'vuex'
import * as types from '../mutation-types'

// 定义接口 -- state对应的数据
export interface Sta