Как использовать Nuxt.js + Vuex + localStorage ?

Самым легким способом для тестирования будет установить с нуля Nuxt.js с отмеченными галочками Vuex и Axios.

После установки создайте файл с любым названием и разрешением js в директории store. В моем случае файл называется newspaper.js

export const state = () => ({
  posts: {}
})

export const mutations = {
  updatePosts (state, posts) {
    state.posts = posts
  }
}

export const actions = {
  async fetchPosts ({ commit }) {
    // Пытаемся получить посты с LocalStorage
    let posts = JSON.parse(localStorage.getItem('posts'))

    // Если посты получены
    if (posts) {
      // Обновляем переменную posts в store для тех кто не видит, где функция updatePosts она выше
      commit('updatePosts', posts)
      // В else попадаем только в первый раз
    } else {
      // Url API для примера был взят API WordPress демо шаблона Newspaper
      let apiUrl = 'https://demo.tagdiv.com/newspaper_pro/wp-json/wp/v2/posts/'

      // Axios
      await this.$axios.get(apiUrl).then(response => {
        // Формируем структуру постов
        let posts = response.data.map(post => ({
          id: post.id,
          title: post.title.rendered,
          excerpt: post.excerpt.rendered
        }))

        // заносим посты в localStorage
        localStorage.setItem('posts', JSON.stringify(posts))

        // Обновляем переменную posts в store для тех кто не видит, где функция updatePosts она выше
        commit('updatePosts', posts)
      })
    }
  }
}

export const getters = {
  // Этой функцией будем дергать наши посты в компонентах
  getPosts (state) {
    return state.posts
  }
}

Создайте тестовую страницу test.vue в директории pages и добавьте следующий код:

<template>
  <div>
    <!--  Получаем посты используя getter getPosts  -->
    <div class="post" v-for="post in getPosts" :key="post.id">
      <h2 v-html="post.title"></h2>
      <div v-html="post.excerpt"></div>
    </div>
  </div>
</template>

<script>
// Получаем функции getters и actions с созданного модуля newspaper
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'test',
  // Запускаем API в модуле newspaper
  methods: {
    ...mapActions('newspaper', [
      'fetchPosts'
    ])
  },
  async mounted () {
    this.fetchPosts()
  },
  // Запускаем getter getPosts в модуле newspaper
  computed: {
    ...mapGetters('newspaper', [
      'getPosts'
    ])
  }
}
</script>

<style scoped>
h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.post {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 20px;
}
</style>

Пересобираем проект командой

yarn dev

Заходим по адресу

http://localhost:3000/test