VUEX 模块化及辅助函数的使用

1.

1.goods模块演示

 

export default {
    namespaced:true,
    state:{
        title:'添加',
        goodsData:{}
    },
    mutations:{
        changeTitle(state,payload){
            state.title = payload;
        },
        changeGoods(state,payload){
            state.goodsData = payload;
        }
    }
}

login.js 代码演示

import { getItem,setItem } from '@/unit/storage'
export default {
    namespaced:true,
    state:{
        tokener:getItem('TOKEN'), //一个对象用来存储登录用户信息(token等数据)
     
    },
    mutations:{
        setUser(state,data){
            state.tokener=data
      
            //为了防止刷新数据丢失,我么们需要把数据存储在本地存储
            setItem('TOKEN',state.tokener)
      
            // window.localStorage.setItem(TOKEN_KEY,JSON.stringify(state.user))
        },
    }
}

1.如何提交模块  借助辅助函数

import {mapMutations} from 'vuex'    

  //导入store仓库
    ...mapMutations("goods", ["changeTitle", "changeGoods"]),

   this.changeTitle('修改商品')
       this.changeGoods(row)

2.如何引用到页面 借助辅助函数，可以直接取

import {mapState} from 'vuex'

  computed:{
    ...mapState('goods', ['title', 'goodsData']),
  },