nuxt项目中使用store

最新推荐文章于 2024-10-12 17:32:48 发布

原创最新推荐文章于 2024-10-12 17:32:48 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #javascript #vue.js

前端同时被 3 个专栏收录

25 篇文章

订阅专栏

javascript

24 篇文章

订阅专栏

问题解答

17 篇文章

订阅专栏

本文介绍如何在Nuxt.js项目中初始化Vuex状态管理，并展示了如何在store模块中定义state、mutations、actions及getters，以及如何在页面组件中调用这些方法来操作和访问状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先初始化创建一个nuxt项目

nuxt项目创建以后，内部已自动集成store，所以无需再单独安装和引入

在根目录的store文件夹下新建文件，例如home.js

//home.js
export const state = () => ({
    age: 18
})

export const mutations = {
    add(state, data) {
        state.age += data
    }
}

export const actions = {
    addAge(store, data) {
        console.log(store);
        setTimeout(() => {
            store.commit('add', data)
            console.log(store.state.age);
        }, 2000)
    }
}

export const getters = {

}

在页面中访问

  methods: {
    add() {
      // this.$store.state.home.name;
      // this.$store.commit("home/add", 2);
      this.$store.dispatch("home/addAge", 2);
    },
  },