当前位置：首页 > article >正文

Nuxt中使用vuex管理组件信息通讯

article 2024/12/26 11:39:03

首先你手上要有一个Nuxt项目然后我们先来引入依赖

npm install vuex@3 --save

要指定一下版本
这样我们的vuex就进来了
在这里插入图片描述
然后 Nuxt项目的根目录下一般就有一个 store 目录是专门用来让我们建vuex环境的
在下面创建一个index.js
参考代码如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = ()=> new Vuex.Store({
    state:{
        dom: "vuex数据"
    }
})

export default store

这样我们就简单定义了一个vuex结构然后我们在随便一个组件上编写代码如下

<template>
  <div>
        <button @click = "getDom">展示数据</button>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
    }
  },
  methods:{
    getDom() {
      console.log(this.$store.state.dom);
    }
  }
}
</script>

我们这里通过this.$store去拿我们定义在vuex state中的响应式数据dom
我们运行项目然后点击按钮
在这里插入图片描述
也是没有任何问题

然后我们将 store 目录下的index.js修改如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = ()=> new Vuex.Store({
    state:{
        dom: "vuex数据"
    },
    mutations:{
        setDom(state,dom){
            state.dom += dom;
        }
    },
})

export default store

这里我们在mutations中定义了一个方法用接收到的参数给state.dom赋值

然后我们将使用vuex的组件代码修改如下

<template>
  <div>
        <button @click = "getDom">展示数据</button>
        <button @click = "setDom">修改数据</button>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data() {
    return {
    }
  },
  methods:{
    getDom() {
      console.log(this.$store.state.dom);
    },
    setDom(){
      this.$store.commit("setDom","修改后的vuex数据")
    }
  }
}
</script>