nuxt中保存组件状态

在 Nuxt 中，可以使用 Vuex 来保存组件的状态。Vuex 是一个状态管理库，它可以帮助我们在不同的组件中共享和管理数据。

首先，需要在 Nuxt 项目中安装 Vuex：

npm install vuex

然后，在 store 目录下创建一个 index.js 文件。在该文件中，定义一个 Vuex store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

在上面的代码中，定义了一个 counter 状态和一个 increment mutation。state 函数返回一个对象，该对象包含了所有需要保存的状态。mutations 对象包含了所有可以改变状态的方法。

接下来，在需要保存状态的组件中，可以使用 mapState 和 mapMutations 辅助函数来访问 Vuex store 中的状态和方法：

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState({
      counter: state => state.counter
    })
  },
  methods: {
    ...mapMutations({
      increment: 'increment'
    })
  }
}
</script>

在上面的代码中，使用了 mapState 辅助函数来将 counter 状态映射到组件的 counter 计算属性中。使用了 mapMutations 辅助函数来将 increment 方法映射到组件的 increment 方法中。

现在，每当调用 increment 方法时，都会更新 Vuex store 中的 counter 状态。在任何需要访问 counter 状态的组件中，都可以使用 counter 计算属性来获取当前的状态值。