学习笔记
1.动态引入 在页面中调用 需要使用 文件名
2.模块化引入，在页面中调用 需要使用 在store中 引入的名称
一，动态引入 在为了清楚明了 管理好vuex 这个演示一下 模块引入 以及使用
动态引入是 通过store.registerModule 这个函数添加到 store 里面去（就是添加到vuex里面的模块化） ，通过 require.context（） 创建 模块进行搜索 在通过函数 循环搜索的值 ，依次添加 模块
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import moa from './mod/a'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
user: ''
},
mutations: {
euser(state, stop) {
state.user = stop
console.log(this.state.user)
}
},
actions: {},
modules: {}
// modules: {
// moa
// }
})
//require.context 创建一个查询模块 参数一:要搜索的目录,参数二:是否搜索子目录,参数三:一个匹配文件的正则表达式
const modulesContext = require.context('@/store/mod', true, /\.js$/)
/**
* 创建模块函数
* @param fileArr
*/
function createStoreModules(fileArr) {
fileArr.keys().forEach(modules => {
// 动态注册vuex
// store.registerModule(参数一:注册状态名称,参数二:注册的状态内容)
store.registerModule(
modules.replace(/(^\.\/)|(\.js$)/g, ''),
fileArr(modules).default
)
})
}
/**
* 创建模块
*/
createStoreModules(modulesContext)
export default store
store 文件下级 模块module的文件 只展示一个
const state = {
admin: 'user'
}
const mutations = {
adduser(state, data) {
state.admin = data
}
}
const actions = {
// 管理员登录
login({ state, commit }, params) {
return admin.login(params)
},
// 获取当前管理员信息
async auth({ state, commit }, params) {
const res = await admin.auth(params)
commit('SET_USER_INFO', res.data.data)
return res
}
}
export default {
namespaced: true,
state,
actions,
mutations
}
页面中使用
<template>
<div>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="账号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-button type="success" @click="login">登录按钮</el-button>
<p>{{ adm }}</p>
<p>1111</p>
<button @click="() => add('我是adm')">改变adm的值</button>
</el-form>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {
form: {
name: '',
password: ''
}
}
},
methods: {
...mapMutations({
add: 'a/adduser'
}),
onSubmit() {
console.log('submit!')
},
login() {
// console.log(this.form)
// 存储到 vuex中
this.$store.commit('euser', this.form.name)
this.$router.push('/home')
window.localStorage.setItem('name', '111')
}
},
computed: {
...mapState({
adm: state => state.a.admin
})
}
}
</script>
<style lang="stylus" scoped></style>
二，模块引入 使用 和上面一样 展示 3个页面
store.js 内容
import Vue from 'vue'
import Vuex from 'vuex'
import moa from './mod/a' // 引入的a模块
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
user: ''
},
mutations: {
euser(state, stop) {
state.user = stop
console.log(this.state.user)
}
},
actions: {},
modules: {
moa
}
})
export default store
store下面的模块的文件
const state = {
admin: 'user'
}
const mutations = {
adduser(state, data) {
state.admin = data
}
}
const actions = {
// 管理员登录
login({ state, commit }, params) {
return admin.login(params)
},
// 获取当前管理员信息
async auth({ state, commit }, params) {
const res = await admin.auth(params)
commit('SET_USER_INFO', res.data.data)
return res
}
}
export default {
namespaced: true,
state,
actions,
mutations
}
页面中使用
<template>
<div>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="账号">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-button type="success" @click="login">登录按钮</el-button>
<p>{{ adm }}</p>
<p>1111</p>
<button @click="() => add('我是adm')">改变adm的值</button>
</el-form>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
data() {
return {
form: {
name: '',
password: ''
}
}
},
methods: {
...mapMutations({
add: 'moa/adduser'
}),
onSubmit() {
console.log('submit!')
},
login() {
// console.log(this.form)
// 存储到 vuex中
this.$store.commit('euser', this.form.name)
this.$router.push('/home')
window.localStorage.setItem('name', '111')
}
},
computed: {
...mapState({
adm: state => state.moa.admin
})
}
}
</script>
<style lang="stylus" scoped></style>
