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

 更新时间:2019年10月17日 08:23:18   作者:big_cat  
这篇文章主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

当我们使用 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>

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

相关文章

  • 如何使用vue过滤器filter

    如何使用vue过滤器filter

    这篇文章主要介绍了如何使用vue过滤器filter,对vue感兴趣的同学,可以参考下
    2021-05-05
  • 基于vue中对鼠标划过事件的处理方式详解

    基于vue中对鼠标划过事件的处理方式详解

    今天小编就为大家分享一篇基于vue中对鼠标划过事件的处理方式详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解Vue的computed(计算属性)使用实例之TodoList

    详解Vue的computed(计算属性)使用实例之TodoList

    本篇文章主要介绍了详解Vue的computed(计算属性)使用实例之TodoList,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue.js封装switch开关组件的操作

    vue.js封装switch开关组件的操作

    这篇文章主要介绍了vue.js封装switch开关组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 详解vue 配合vue-resource调用接口获取数据

    详解vue 配合vue-resource调用接口获取数据

    本篇文章主要介绍了vue 配合vue-resource调用接口获取数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue中v-for的9种使用案例总结大全

    Vue中v-for的9种使用案例总结大全

    v-for是vue的循环指令,作用是遍历数组(对象)的每一个值,这篇文章主要给大家介绍了关于Vue中v-for的9种使用案例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    这篇文章主要介绍了解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue模版编译详情

    vue模版编译详情

    本文的初衷是想让更多哎学习的人知道并了解vue模版编译,所以文中主要以阶段流程为主,不会涉及过多的底层代码逻辑,需要的朋友可以参考一下
    2021-09-09
  • 详解Nuxt.js中使用Element-UI填坑

    详解Nuxt.js中使用Element-UI填坑

    这篇文章主要介绍了详解Nuxt.js中使用Element-UI填坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue3+TS reactive设定类型方式

    vue3+TS reactive设定类型方式

    这篇文章主要介绍了vue3+TS reactive设定类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04

最新评论