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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP分享图片的生成方法
2018/04/25 PHP
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
对命令行模式与python交互模式介绍
2018/05/12 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python调用支付宝支付接口流程
2019/08/15 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
医学生自我鉴定范文
2014/03/26 职场文书
驻村工作先进事迹
2014/08/14 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
退休欢送会主持词
2015/07/01 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Python快速优雅的批量修改Word文档样式
2021/05/20 Python