Vue组件中直接获取Vuex状态state数据

account.js

export default {
  state: {
    user: {
      'data': null
      'success': false,
      'timestamp': 0
    }
  },
  mutations: {
    ...
  },
  actions: {
    ...
  }
}

在另一个组件中获取user数据

export default {
  created () {
    let user = this.$store.state.account.user.data
    console.log(user)
  },
}

注:使用$store的前提是在main.js中初始化Vue时加载store/index.js

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'

import account from './modules/account'

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  getters,
  modules: {
    account
  },
  strict: debug
})

版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/12/directly-obtain-vuex-status-state-data-from-vue-component/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
Vue组件中直接获取Vuex状态state数据
account.js export default { state: { user: { 'data': null 'success': false, 'timestamp': 0 ……
<<上一篇
下一篇>>
文章目录
关闭
目 录