美文网首页
VUEX传值

VUEX传值

作者: 我叫杨毅 | 来源:发表于2023-03-06 17:38 被阅读0次
image.png
 commit('SET_NAME', user.userName)
image.png
 state: {
    token: getToken(),
    name: '',
    roles: [],
    permissions: [],
    baseData: {},
    userInfo: {},////VUEX YY 3
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_NAME: (state, name) => {
      state.name = name
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    },
    SET_BASE_DATA: (state, baseData) => {
      state.baseData = baseData
    }, 
    //VUEX YY 2
    SET_USER_INFO: (state, userInfo) => {
      state.userInfo = userInfo
    }, 
  },
image.png
const getters = {
    size: state => state.app.size,
    device: state => state.app.device,
    dict: state => state.dict.dict,
    token: state => state.user.token,
    name: state => state.user.name,

    introduction: state => state.user.introduction,
    roles: state => state.user.roles,
    title: state => state.settings.title,
    sidebarRouters: state => state.permission.sidebarRouters,
    defaultRoutes: state => state.permission.defaultRoutes,
    headerConfig: state => state.production.headerConfig,
    productOrderList: state => state.production.productOrderList,
    showMenu: state => state.production.showMenu,
    menuList: state => state.production.menuList,
    productRejects: state => state.production.productRejects,
    qualityOrderList: state => state.quality.qualityOrderList,
    qualityBatchList: state => state.quality.qualityBatchList,
    shkList: state => state.user.baseData.shkList,
    mesBomDtls: state => state.production.mesBomDtls,
    msysItem: state => state.production.msysItem,
    userInfo: state => state.user.userInfo, //VUEX YY 4
};
export default getters;
image.png
import { mapGetters } from 'vuex'; //VUEX YY 5
export default {
    name: 'homePage',
    computed: {
        ...mapGetters(['defaultRoutes', 'userInfo']), //VUEX YY 6
    },
    components: {
        [Icon.name]: Icon,
        [Form.name]: Form,
        [Field.name]: Field,
        [Button.name]: Button,
        [Row.name]: Row,
        [Col.name]: Col,
        [Dialog.name]: Dialog,
    },
    data() {
        return {
            scanImg: scan,
        };
    },
    mounted() {
        // 截取日期字符串
        this.userInfo.updateDt = this.userInfo.updateDt.slice(0, 10);
    },

相关文章

  • VUE08--{VUEX}

    VUEX是什么 管理(修改或设置)组件用到的数据的工具。免除了之前组件传值的麻烦。组件传值 VUEX组成 stor...

  • 2020-03月前端面试题

    vue相关 vue父子组件传值方式有哪些? 兄弟组件间如何传值? vuex是用来干什么的? vuex核心模块有哪些...

  • vuex最详细完整的使用用法

    为什么使用vuex? vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父...

  • Vue组件之间的传值

    Vue父子组件之间的传值(props)兄弟组件 VUEX

  • vuex的基本概念

    一、什么时候使用Vuex 如果应用比较简单,就不需要使用Vuex,直接使用父子组件传值及及它传值方式即可,使用Vu...

  • vuex

    一、什么时候使用Vuex 如果应用比较简单,就不需要使用Vuex,直接使用父子组件传值及及它传值方式即可,使用Vu...

  • vue + vuex 全家桶浏览器间数据共享方案

    方案思路: 页面内仍然使用vuex做组件间传值,页面之间使用localstorage传值,并且监听storage事...

  • (十三)非父子组件传值(观察值模式)

    本节知识点 兄弟间传值 多层间传值 解决办法 VueX 总线机制 (本节讲解) 总线机制借用prototype还有$on

  • Vue高级组件传值之 provide/inject

    vue组件父传子传值的话有很多地方都可以查到,有很多方法:props传值、vuex传值等现在说的是另外一种用的比较...

  • 2018-09-28

    1.vue 路由跳转传值 -------- 最好用vuex,bus不适合在路由跳转中传值,因为需要初始化组件 2....

网友评论

      本文标题:VUEX传值

      本文链接:https://www.haomeiwen.com/subject/uvimldtx.html