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中void(0)的具体含义解释
Aug 02 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
python进阶教程之异常处理
2014/08/30 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python实现全排列的打印
2018/08/18 Python
python根据url地址下载小文件的实例
2018/12/18 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
艺术用品:Arteza
2018/11/25 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
会计专业大学生求职信范文
2014/01/28 职场文书
车间安全生产标语
2014/06/06 职场文书
反腐倡廉标语
2014/06/24 职场文书
企业消防安全责任书
2014/07/23 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
会计主管岗位职责
2015/04/02 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
居安思危观后感
2015/06/11 职场文书
领导离职感言
2015/08/03 职场文书
办公用品管理制度
2015/08/04 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python