Vuex Module-状态仓库分割的使用
vuex构成
vuex主要包含以下五个部分:
- State // 存储变量、数据
- Getter // 类似计算属性
- Mutation // 唯一修改state的方法
- Action // 异步调用Mutation
- Module // 将store模块化
vuex的modules使用
创建目录
在此示例中,我创建了两个store文件,分别是 profile.js
和custom.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
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24