Nuxt.js 中如何创建 Vuex store？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 创建 Vuex Store 的基本结构

在 Nuxt.js 中，Vuex store 是通过在 store 目录下创建文件来自动生成的。每个文件对应一个 Vuex 模块，index.js 是根模块。

2. State

state 是 Vuex store 的数据源。在 state 中定义的数据可以在整个应用中被访问和修改。例如：

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

3. Mutations

mutations 是唯一可以修改 state 的地方。每个 mutation 都有一个字符串类型的事件类型 (type) 和一个回调函数 (handler)。例如：

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

4. Actions

actions 用于处理异步操作或复杂的业务逻辑。actions 可以包含任意异步操作，并且可以通过 commit 来触发 mutations。例如：

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

5. Getters

getters 用于从 state 中派生出一些状态，类似于 Vue 组件中的计算属性。例如：

export const getters = {
  getCounter(state) {
    return state.counter
  }
}

6. 模块化

如果你需要将 Vuex store 模块化，可以在 store 目录下创建多个文件，每个文件对应一个模块。例如，创建一个 user.js 文件：

// www.javascriptcn.com code example
// store/user.js
export const state = () => ({
  name: 'John Doe'
})

export const mutations = {
  setName(state, name) {
    state.name = name
  }
}

然后在 index.js 中引用这个模块：

// store/index.js
export const modules = {
  user: require('./user.js').default
}

7. 自动加载

Nuxt.js 会自动加载 store 目录下的所有模块，并将其整合到一个 Vuex store 中。你不需要手动配置或导入这些模块。

8. 使用 Vuex Store

在组件中使用 Vuex store 时，可以通过 this.$store 访问 store 的 state、getters、mutations 和 actions。例如：

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
}
</script>

通过这种方式，你可以在 Nuxt.js 应用中轻松创建和管理 Vuex store。

Nuxt.js 中如何创建 Vuex store？

推荐答案