今天是关于vuex的最后一篇文章了！怎么说呢？且行且珍惜吧!！认真尝试每一行代码！
之前的文章当中，我们把所有的数据都存放到了 vuex文件夹当中的store.js当中。但随着将来项目的复杂度增大，共享的状态越来越多，越来越复杂！在这个时候我们需要将状态根据功能来对其进行模块化，同时也是为了便于将来的维护，所以分开写会更好一些。
今天我们主要来学习一下module:状态管理器的模块化操作。
假如项目中包括两个模块，分别为广告模块与用户模块。
首先在src文件夹下新建一个vuex文件夹，然后在该文件夹下新建一个index.js文件用于生成Store对象。然后在vuex文件夹下新建adv与user文件夹，最后分别在这两个文件夹内创建一个index.js文件。如图
vuex/adv/index.js文件存放的是广告模块的内容。代码为：
//在该文件中可以单独设置adv相关的状态
const state={
//定义状态数据userName
advName:"我是一个通栏广告！"
}
export default {
state,//将state进行输出
}
vuex/user/index.js文件存放的是用户模块内容。代码为：
//在该文件中可以单独设置user相关的状态
const state={
//定义状态数据userName
userName:"张培跃"
}
export default {
state,//将state进行输出
}
在vuex/index.js中引入刚才定义的两个模块，并通过modules导出：
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
import axios from "axios";
import adv from "./adv";//引入vuex的adv模块
import user from "./user";//引入vuex的user模块
Vue.use(Vuex);//使用vuex
export default new Vuex.Store({//暴露Store对象
modules:{
adv,//adv状态
user//user状态
}
})
配置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'//导入vuex,index.js为默认选 中文件夹，在此可以省略
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,//添加store
components: { App },
template: '<App/>'
})
在模板中使用的格式为$store.state.模块名.state属性名：
<div id="app">
<p>advName:{{$store.state.adv.advName}}</p>
<p>userName:{{$store.state.user.userName}}</p>
</div>
输出的格式可以简化，将computed（计算属性）调整下：
export default {
name: 'App',
computed:{
advName(){
return this.$store.state.adv.advName;
},
userName(){
return this.$store.state.user.userName;
}
}
}
然后模块中直接调用计算属性即可：
<div id="app">
<p>advName:{{advName}}</p>
<p>userName:{{userName}}</p>
</div>
或者通过mapState来对computed进行设置,首先引入mapState:
import {mapState} from "vuex";
然后修改computed:
export default {
name: 'App',
computed:{
...mapState({
advName(state){
console.log(state);
return state.adv.advName;
},
userName(state){
return state.user.userName;
}
})
}
}
最后在页面中渲染的内容为：
advName:我是一个通栏广告！
userName:张培跃
接下来，我们来看一下如何通过mutation改变状态值。
首先在adv/index.js中添加一个mutation方法SET_ADVNAME用于改变advName状态:
const mutations={
//state为当前状态对象，v为按收的值
SET_ADVNAME(state,v){
state.advName=v;
}
}
在模板中调用，直接通过$store.commit('方法名',传递参数)。
<div id="app">
<p>advName:{{advName}}</p>
<p>userName:{{userName}}</p>
<p><input type="button" value="改变advName" @click="$store.commit('SET_ADVNAME','我是一个富媒体广告')"></p>
</div>
现在，在user/index中也添加一个mutation方法SET_ADVNAME，这次改变的是userName状态:
const mutations={
//state为当前状态对象，v为按收的值
SET_ADVNAME(state,v){
state.userName=v;
}
}
最后点击按钮，你会发现两个模块中的SET_ADVNAME均被触发了！这说明mutation是不区分模块的。如果在不同模块中的mutation出现同名的方法，都会执行。
getters与actions与之前的定义与调取是一样的，在此就不再描述了！
关于vuex共七篇文章，已完结！希望可以对各位学习vuex有所帮助！
作业：
- 尝试getters与actions的定义与调取.
-
尝试getters与actions出现同名，结果会怎样？（尝试一下，估计和你想的不一样哦）
网友评论