vuex实现store持久化示例代码-html代码-BFW代码库

vuex实现store持久化示例代码

代码语言：html

所属分类：其他

代码描述：vuex实现store持久化示例代码，通过自定义持久化store实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
</head>

<body>
    <div id="app">
        {{ $store.state.count }}
        <input type="text" v-model="$store.state.username" />
        输入修改值后刷新试试
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuex.min.js"></script>
    <script>
        // 一个自定义的 Vuex 持久化插件
    const myPersistedState = {
      // 传入一个存储的键名
      key: 'my-vuex',
    
      // 初始化状态
      initialState: {
        count: 0,
        username: ''
      },
    
      // 从本地存储中获取状态
      getState() {
        const stateJSON = localStorage.getItem(this.key)
        return stateJSON ? JSON.parse(stateJSON) : this.initialState
      },
    
      // 将状态保存到本地存储中
      setState(state) {
        const stateJSON = JSON.stringify(state)
        localStorage.........完整代码请登录后点击上方下载按钮下载查看