• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Vuex Module-状态仓库分割的使用

武飞扬头像
PHP中文网
帮助35

vuex构成

vuex主要包含以下五个部分:

  • State // 存储变量、数据
  • Getter // 类似计算属性
  • Mutation // 唯一修改state的方法
  • Action // 异步调用Mutation
  • Module // 将store模块化

vuex的modules使用

创建目录

学新通技术网

在此示例中,我创建了两个store文件,分别是 profile.jscustom.js,一个根文件index.js

custom.js

const customs = {
    namespaced: true, // 创建命名空间
    state: { // 存储变量
        showAlert: false
    },
    mutations: { // 定义修改state方法
        CHANGESHOW: (state, params) => {
            state.showAlert = !state.showAlert        }
    },
    actions: { // 异步调用mutations
        setShow: ({ commit }) => {
            commit('CHANGESHOW')
        }
    },
    getters: { // 将数据过滤输出
        bodyShow: state => state.showAlert    }}export default customs

profile.js

const profile = {
  namespaced: true,
  state: {
    name: 'common name',
    age: 18,
    bool: false
  },
  mutations: {
    CHANGEMSG: (state, params) => {
      state.name = params    },
    CHANGEAGE: (state, params) => {
      state.name = params    },
    CHANGEBOOL: (state) => {
      state.bool = !state.bool    }
  },
  actions: {
    setName: ({ commit }) => {
      commit('CHANGEMSG', 'Vuex common name')
    },
    setAge: ({ commit }) => {
      commit('CHANGEAGE', 81)
    },
    setBool: ({ commit }) => {
      commit('CHANGEBOOL')
    }
  },
  getters: {
    vuexName: state => state.name,
    vuexAge: state => state.age,
    vuexBool: state => state.bool  }}export default common

index.js

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

// 引入子store
import profile from './modules/profile'
import customs from './modules/customs'

// Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    profile,
    customs
  }
})

export default store // 导出store,以便于后续使用

在需要使用的.vue文件里进行使用。方法如下

index.vue

<template>
	<div>
	  name: <h5>{{vuexName}}</h5> <button @click='setName'>chenge name</button>
      age: <h5>{{vuexAge}}</h5> <button @click='setAge'>chenge age</button>
      bool: <h5>{{vuexBool}}</h5> <button @click='setBool'>chenge bool</button>
      <br/>
      
      <span @click='setShow' style='display:inline-block;width:200px;height:30px;border:1px solid #999;border-radius:5px;text-align:center;line-height:30px;cursor: pointer;'>click me ,change showAlert</span>
      <em>{{bodyShow}}</em>
	</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
computed: {
    ...mapGetters('profile', ['vuexName', 'vuexAge', 'vuexBool']),
    ...mapGetters('customs', ['bodyShow'])
  },
methods: {
    ...mapActions('customs', ['setShow']),
    ...mapActions('profile', ['setName', 'setAge', 'setBool']),
}
</script>
<style>

</style>

app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
// style
import './../../sass/app.scss';

// Components
import Main from './Main.vue';
import routes from './routes';
// store
import store from './store';  // 将store挂载到Vue

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  saveScrollPosition: true,
});

new Vue({ router, store, ...Main }).$mount('#app');

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfhbgc
系列文章
更多 icon
同类精品
更多 icon
继续加载