Nuxt项目使用vuex（vue2）

nuxt创建项目时直接选以及存在vuex。
在项目下有store文件夹，在此目录下的新建的每个文件及相当于每个模块，不同的模块可以存在同名的变量state及mutation。

新建store/detail.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = () => ({
  itemTitle: 'DetailPage',
  itemDate: '2021-10-31',
});

const mutations = {
  modifyItemTitle(state, payload) {
    state.itemTitle = payload;
  },
  modifyDate(state,payload){
    state.itemDate = payload
  }
};

// 存在异步操作使用action，直接调用mutation中的函数
const actions = {
  modifyDate(context,payload) {
    context.commit('modifyDate',payload)
  }
}

export default {
  state,
  mutations,
  actions,
};

文件store/welfare.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = () => ({
  itemTitle: 'WelfarePage',
  itemDate: '2020-10-31',
});

const mutations = {
  modifyItemTitle(state, payload) {
    state.itemTitle = payload;
  },
  modifyDate(state,payload){
    state.itemDate = payload
  }
};

// 存在异步操作使用action，直接调用mutation中的函数
const actions = {
  modifyDate(context,payload) {
    context.commit('modifyDate',payload)
  }
}

export default {
  state,
  mutations,
  actions,
};

在page中使用state,在page中改变state变量，使用mutation或者action

文件InfoButon.vue

<template>
  <div>
    <p>{{ info }}</p>
    <p>Store:{{ storeTitle }}</p>
    <p>Store:{{ storeItemDate }}</p>
    <p>Store:{{ welfareTitle }}</p>
    <button @click="cancelInfo">Cancel</button>
    <t-button variant="outline" theme="primary">下载</t-button>
  </div>
</template>
export default {
  name: 'InfoButon',
  data() {
    return {
      info: 'ModifyInfo',
    }
  },
  computed: {
    storeTitle() {
      return this.$store.state.detail.itemTitle
    },    
    storeItemDate() {
      return this.$store.state.detail.itemDate
    },
    welfareTitle(){
      return this.$store.state.welfare.itemTitle

    }
  },
  mounted() {
    // console.log('mounted', this.$store.state.detail.itemTitle)
  },

  methods: {
    cancelInfo() {
      // console.log('cancelInfo', this)
      // 修改title
      this.info = 'Init-Info'
      // 向父组件传递数据
      // this.$emit('getSubItemInfo', { name: 'TEXT' })
    },
  },
}
</script>

文件PageTech.vue

<template>
  <div>
    hello PageTech-{{ title }}
    <button @click="getTitle">getTitle</button>
    <info-button ref="infoButtonRef" @getSubItemInfo="getSubItemInfo" ></info-button>
  </div>
</template>
<script>
import InfoButton from './components/InfoButton/index.vue'
import {getListData} from '@/service/detail';
export default {
  name: 'PageTect',
  components: {
    InfoButton,
  },
  data() {
    return {
      title: 'Title-title',
    }
  },
  beforeMount() {
    this.getListC()
  },
  //
  mounted() {
    // console.log('mounted');
  },
  methods: {
    getTitle() {
      // console.log('title',this.title,this);
      // 调用子组件方法
      this.$refs.infoButtonRef.cancelInfo()
      // 修改全局状态state
      this.$store.commit('detail/modifyItemTitle', 'TEST-TEST')
      this.$store.dispatch('detail/modifyDate', '2022-06-01')
      console.log(' this.$store', this.$store)
    },
    getSubItemInfo(v) {
      // console.log('v', v)
    },
    // ?page=1&size=20&businessType=lately&noMore=false&username=weixin_40119412
    async getListC() {
      const res = await getListData({
            page: 1,
            size: 20,
            businessType: 'lately',
            noMore: false,
            username: 'weixin_40119412',
      })
      
      console.log('res', res)
    },
  },
}
</script>