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

首先 你手上要有一个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>

这里 我们又写了一个按钮 点击修改数据按钮 就会调用setDom 传过去的数据是修改后的vuex数据

然后 我们启动项目 我们先点 展示数据

他将dom的值展示在了控制台上
我们再点一下 修改数据

没有任何反应 但其实他已经把dom改了 只是没有输出在控制台上
我们再点一次 展示数据

可以看到 再次输出的dom已经被setDom改变了