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
})
上一篇 Vuex核心概念解析State Getters Mutations Actions
下一篇 Vuex获取this对象及深度state监测
目录
文章列表
1 Android中ViewPager+Fragment禁止预加载问题
Android中ViewPager+Fragment禁止预加载问题
2
docker-maven-plugin实现部署SpringBoot应用
docker-maven-plugin实现部署SpringBoot应用
3
PHP获取请求路径和请求参数
PHP获取请求路径和请求参数
4
使用Dockerfile为SpringBoot应用构建Docker镜像
使用Dockerfile为SpringBoot应用构建Docker镜像
5
React Native之微信登陆、分享与支付
React Native之微信登陆、分享与支付
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。