今天是关于 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 出现同名, 结果会怎样?(尝试一下, 估计和你想的不一样哦)
来源: http://www.jianshu.com/p/45a540db8056