nuxt Vuex 使用详解

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它提供了一些特殊的功能，比如服务器端渲染（SSR），自动生成路由配置等等。Vuex 是 Vue.js 的状态管理库，可以方便地管理组件之间的状态。

在 Nuxt.js 中使用 Vuex 非常方便，只需要在 store 目录下创建一个 index.js 文件，然后在其中定义 state、mutation、action、getter 等等。

下面是一个简单的例子：

// store/index.js

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

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

export const actions = {
increment(context) {
context.commit('increment')
}
}

export const getters = {
getCount(state) {
return state.count
}
}

然后，在组件中使用 Vuex 也非常简单，只需要使用 mapState、mapMutations、mapActions、mapGetters 等等工具函数，就可以方便地获取和修改状态了。

下面是一个简单的示例：

// pages/index.vue

<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>

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

export default {
computed: {
...mapState(['count'])
},
methods: {
...mapActions(['increment'])
}
}
</script>

这样，我们就可以在页面中显示当前的计数器，并且通过点击按钮来增加计数器的值。

总之，Nuxt.js 和 Vuex 都是非常强大的工具，它们可以帮助我们构建高性能的 Web 应用程序。如果你想要深入学习这些工具，建议你查看官方文档，或者参考一些优秀的教程和示例代码。