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 相关文章推荐
js实现省市联动效果的简单实例
Feb 10 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
Vue如何循环提取对象数组中的值
Nov 18 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
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php遍历目录方法小结
2015/03/10 PHP
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
python3 读写文件换行符的方法
2018/04/09 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python链表类中获取元素实例方法
2021/02/23 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
活动倡议书范文
2014/05/13 职场文书
活动主持人开场白
2015/05/28 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js