Vuex modules模式下mapState/mapMutations的操作实例


Posted in Javascript onOctober 17, 2019

当我们使用 Vuex 实现全局状态维护时,可能需要将状态值划分多个模块,比如一些 root 级的用户登录状态,token,用户级的用户信息,购物车级的购物车信息。

下面我们实例演示下如何在多模块下使用 mapState/mapMutations。

  • modules 只作用于属性,属性会归属在相应的模块名的命名空间下。
  • mutations, actions, getter 没有命名空间的限定,所以要保证全局的唯一性,否则后者会覆盖前者

store/index.js

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

import user from './user'
import order from './order'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
    order
  },
  state: {
    hasLogin: false,
    token: ""
  },
  mutations: {
    setHasLogin(state, hasLogin) {
      state.hasLogin = hasLogin
    },
    setToken(state, token) {
      state.token = token
    }
  }
})

export default store

store/user.js

const state = {
  name: "sqrtcat",
  age: 25
}
const mutations = {
  setUserName(state, name) {
    state.name = name
  },
  setUserAge(state, age) {
    state.age = age
  }
}
const actions = {

}
const getters = {

}

export default {
  state,
  mutations,
  actions,
  getters
}

store/order.js

const state = {
  name: "cart",
  count: 0
}
const mutations = {
  setOrderName(state, name) {
    state.name = name
  },
  setOrderCount(state, count) {
    state.count = count
  }
}
const actions = {

}
const getters = {

}

export default {
  state,
  mutations,
  actions,
  getters
}

Vue 引入

import Vue from 'vue'
import App from './App'

import store from './store'

Vue.config.productionTip = false

Vue.prototype.$store = store // 注入仓库

const app = new Vue({
  store// 注入仓库
})

app.$mount()

index.vue

<template>
  <view>
    <button class="primary" @click="setUserName('big_cat')">setUserName</button>
    <button class="primary" @click="setUserAge(27)">setUserAge</button>
    <button class="primary" @click="setOrderName('yes')">setOrderName</button>
    <button class="primary" @click="setHasLogin(true)">setHasLogin</button>
    <button class="primary" @click="setToken('tokentokentokentoken')">setToken</button>
    <view class="">
      {{userName}}
    </view>
    <view>{{userAge}}</view>
    <view>{{orderName}}</view>
    <view>{{hasLogin}}</view>
    <view>{{token}}</view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "vuex"

  export default {
    data() {
      return {}
    },
    computed: {
      // 原生
      hasLogin() {
        return this.$store.state.hasLogin
      },
      token() {
        return this.$store.state.token
      }
      // 仓库root属性 可以直接 magic 赋值
      // ...mapState(["hasLogin", "token"]),
      // 因为 modules 下的属性使用了命名空间 所以不能使用数组方式的 magic
      ...mapState({
        userName: state => state.user.name,
        userAge: state => state.user.age,
        orderName: state => state.order.name
      }),
      // 更多示例
      ...mapState({
        hasLogin(state) {
          return state.hasLogin
        },
        token(state) {
          return state.token
        }
      }),
      ...mapState({
        hasLogin: (state) => {
          return state.hasLogin
        },
        token: (state) => {
          return state.token
        }
      }),
    },
    methods: {
      // vuex 在使用了 modules 模式时
      // mutation依然没有命名空间的概念 所以在定义 mutations 时要注意全局的唯一性
      // 否则后者会覆盖前者
      ...mapMutations(["setHasLogin", "setToken"]),
      // magic style1
      ...mapMutations(["setUserName", "setUserAge", "setOrderName"]),
      // magic style2
      ...mapMutations({
        setUserName(commit, userName) {
          commit("setUserName", userName)
        },
        setUserAge(commit, userAge) {
          commit("setUserAge", userAge)
        },
        setOrderName(commit, orderName) {
          commit("setOrderName", orderName)
        }
      }),
      // 原生写法
      setUserName(userName) {
        this.$store.commit("setUserName", userName)
      },
      setUserAge(userAge) {
        this.$store.commit("setUserAge", userAge)
      },
      setOrderName(orderName) {
        this.$store.commit("setOrderName", orderName)
      }
    }
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
小程序实现单选多选功能
Nov 04 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 #Javascript
Weex开发之地图篇的具体使用
Oct 16 #Javascript
WEEX环境搭建与入门详解
Oct 16 #Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 #Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 #Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 #Javascript
关于JS模块化的知识点分享
Oct 16 #Javascript
You might like
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
图文详解WinPE下安装Python
2016/05/17 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python基于递归解决背包问题详解
2019/07/03 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
团日活动策划书
2014/02/01 职场文书
十八届三中全会感言
2014/03/10 职场文书
村干部培训班主持词
2014/03/28 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
幼儿园见习报告
2014/10/30 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫