数据存储不一致怎么解决

在上一篇中提到：
https://blog.csdn.net/qq_44469200/article/details/103427078静态的分页功能，没有连接到后台服务器的分页功能该怎么做？
要求：

当没有连接后台服务器让分页内容显示本地自己写的内容，连接服务器之后显示服务器后台给的数据。

问题来了：

发现之前的分页功能不管后台服务器是否连接上，浏览器里面的内容有本地的数据也有后台的数据，没有完全覆盖。

这是 存储不一致 导致的。要解决这个问题，这种情况就要用到vuex 状态管理器了！

不多哔哔！直接上菜，看看我怎么用的。
html内容:

           <ul class="blog-lists-box">
             <li class="blog-list" :key="index" v-for="(item, index) in dataShow" :class="{ 'alt': index%2 == 1 }">
                <div class="card">
                    <div class="blog-overlay">
                      <router-link to="/blog/singleBlog">
                        <figure>
                          <img :src="item.blog_cover"/>
                          <figcaption></figcaption>
                        </figure>
                      </router-link>
                    </div>
                    <div class="card-body">
                       <router-link to="/blog/singleBlog">
                         <h4 class="card-title">{{item.content}}</h4>
                       </router-link>
                       <div class="card-footer">
                         <div class="card-footer-box d-flex">
                           <div class="author-box">
                             <a href="#">
                               <img :src="header1"/>
                               <span>{{item.author}}</span>
                             </a>
                           </div>
                           <div class="blog-date text-uppercase">
                             <i class="fa fa-calendar"></i>
                             <span>{{item.TIME}}</span>
                           </div>
                         </div>
                       </div>
                    </div>
                </div>
              </li>
          </ul>
          <!-- 分页按钮组 -->
          <div class="page">
             <ul class="pagination clearfix flex-center">
                <li class="page-item stic">
                   <a class="page-link "  v-on:click="prePage">Prev</a>
                </li>
                <li class="page-item" :key="index" v-for="(item, index) in totalPage">
                   <a class="page-link"  v-on:click="toPage(item)" :class="{active: currentPage == item}">{{ item }}</a>
                </li>
                <li class="page-item">
                   <a class="page-link"  v-on:click="nextPage">Next</a>
                </li>
             </ul>
          </div>

export default {
  methods: {
    // 下一页
    nextPage: function () {
      var next = this.currentPage
      next++
      // 限制next跳转的范围
      next = next > this.totalPage ? this.totalPage : next
      // 触发store里面nowPage
      this.$store.commit('nowPage', next)
    },
    // 上一页
    prePage: function () {
      var pre = this.currentPage
      if (pre > 1) {
        pre--
        this.$store.commit('nowPage', pre)
      }
    },
    // 跳转至某一页
    toPage: function (page) {
      var clickPage = this.currentPage
      clickPage = page
      this.$store.commit('nowPage', clickPage)
    },
    // 渲染blog 页面内容
    getlists () {
      // 相当于ajax请求
      this.axiosRequest({
        method: 'get',
        url: '/blog/'
      }).then((res) => {
        if (res.status === 200) {
          // 页面请求成功时触发state中的内容改变
          this.$store.commit('blogDataShow', res.data.data)
        }
      })
    }
  },
  // 页面加载完成后
  mounted () {
    this.getlists()
    this.show = true
  },
  // computed和data功能相同定义属性
  computed: {
    // 数据存储在state里面 从数据存储在state里面拿到数据 res.data.data的内容替换中blogDataShow改变
    dataShow () {
      return this.$store.getters.currentData
    },
    // 当前页的内容
    currentPage () {
      return this.$store.state.blog.currentPage
    },
    // axios后台数据的总页数
    totalPage () {
      return this.$store.getters.totalPage
    }
  }
}
</script>

在store 的目录下建一个index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import blog from './blog'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    blog
  }
})

在store目录下建一个blog.js文件
dataShow数组里面的字段要和后台数据库里的字段一样，否则页面数据渲染不上去

// 这里是我要用的images下的图片
import blogimg1 from '../images/blog/blogimg1.jpg'
import blogimg2 from '../images/blog/blogimg2.jpg'
import blogimg3 from '../images/blog/blogimg3.jpg'
import blogimg4 from '../images/blog/blogimg4.jpg'
import blogimg5 from '../images/blog/blogimg5.jpg'
import blogimg6 from '../images/blog/blogimg6.jpg'
import head1 from '../images/blog/blog-details-author-65-1.png'

let state = {
  // 每页显示的内容数据条数
  pageSize: 6,
  // 默认的当前页
  currentPage: 1,
  dataShow: [{
    id: 1,
    author: 'by John Doe',
    content: '1111111',
    blog_cover: blogimg1,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 2,
    author: 'by John Doe',
    content: '30 Places To Get The Best Wedding...',
    blog_cover: blogimg2,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 3,
    author: 'by John Doe',
    content: '35 Places To Get The Best Wedding...',
    blog_cover: blogimg3,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 4,
    author: 'by John Doe',
    content: '40 Places To Get The Best Wedding...',
    blog_cover: blogimg4,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 5,
    author: 'by John Doe',
    content: '45 Places To Get The Best Wedding...',
    blog_cover: blogimg5,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 6,
    author: 'by John Doe',
    content: '55 Places To Get The Best Wedding...',
    blog_cover: blogimg6,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 7,
    author: 'by John Doe',
    content: '60 Places To Get The Best Wedding...',
    blog_cover: blogimg5,
    TIME: ' 06 Sep, 2019'
  }, {
    id: 8,
    author: 'by John Doe',
    content: '65 Places To Get The Best Wedding...',
    blog_cover: blogimg6,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 9,
    author: 'by John Doe',
    content: '70 Places To Get The Best Wedding...',
    blog_cover: blogimg6,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 10,
    author: 'by John Doe',
    content: '75 Places To Get The Best Wedding...',
    blog_cover: blogimg5,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }, {
    id: 11,
    author: 'by John Doe',
    content: '80 Places To Get The Best Wedding...',
    blog_cover: blogimg6,
    TIME: ' 06 Sep, 2019',
    img1: blogimg1,
    img2: blogimg2,
    title: 'To Get The Best Wedding'
  }]
}

// 改变state数据的唯一方法
let mutations = {
  blogDataShow (state, dataShow) {
    state.dataShow = dataShow
  },
  nowPage (state, pageindex) {
    state.currentPage = pageindex
  }
}

// 监听state变化改变当前属性值
let getters = {
  // 计算总页数
  totalPage (state) {
   //  ceil（） 向上取整
    let total = Math.ceil(state.dataShow.length / state.pageSize)
    return total
  },
  // 计算当前页显示的数据内容
  currentData (state) {
    // 当前数组截取的页数 slice（0,6）包含0 不包含6
    return state.dataShow.slice((state.currentPage - 1) * state.pageSize, state.pageSize * state.currentPage)
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

大功告成！
打开服务器时的内容：
关闭服务器时的内容：

这个分页写法是通用的，以后再遇到翻页、分页，存储不一致的问题都可以看看