Skip to content

Files

Latest commit

yelingfengyelingfeng
Update 01.md
Apr 27, 2016
30b5078 · Apr 27, 2016

History

History
135 lines (116 loc) · 3.42 KB

01.md

File metadata and controls

135 lines (116 loc) · 3.42 KB

vuex的常用目录结构

 |--modules
 |-----saerch.js
 |-----searchGrouop.js
 |--actions.js
 |--getters.js
 |--middlewares.js
 |--mutation-types.js
 |--store.js

各文件使用说明

modules

module 也就是vuex概念里的store,这里模块拆分了 存放我们实际项目中要使用的vuex模块, 一般可以针对组件级别定义. 例如这里我们定义了search.js和searchGroup.js 然而module最后会在store.js中统一使用

import search from "./modules/search"
import searchGroup from "./modules/searchGroup"

export default new Vuex.Store({
  modules: {
    search,
    searchGroup
  }
})

  1. module如果编写

    module里定义store和mutations。store是我们正常要维护的状态数据,mutatinons是操作和维护store的处理

const state  = {
   // 查询条件
   searchKey : "",
   // 查询结果
   searchResultList : []
}
const mutations = {
    [SET_SEARCH_LIST] (state,list) {
        state.searchResultList = list;
    },
    [UPDATE_SEARCH_VAL](state , key){
        state.searchKey = key ;
    },
    [CLEAR_SEARCH_VAL](state){
        state.searchKey = "";
        state.searchResultList = [];
    }
}

actions

这里定义我们vue组件要操作的动作事件, 比如请求一个异步操作,获取其他组件的状态等

// actions.js
// 查询结果集合 
export const searchParamList = ({dispatch},group,key) =>{
    // 根据group和key 查询
    api.getSearchParamList({type:group,key:key}).then(reply => {
         if(reply.data.result){
             dispatch(types.SET_SEARCH_LIST,reply.data.result);
         }
    });
}

getters

getters 定义公用的getters处理 ,例如正常组件里想computed一个状态但在vuex里面不知道怎么处理，就可以在这里处理。

Getters Must Be Pure 这东西必须是个纯函数

这里判断了一下查询框的值有没有, 用于X图标显示

// getters.js
export const isEmptySearchKey = (store) => {
    return store.search.searchKey !== ""
}
// Search.vue
import {isEmptySearchKey} from "../vuex/getters"
export default{
     vuex: {
        getters: {
           isEmptySearchKey
        },
        actions: {
          
        }
     } 
}

middlewares

middlewares中间件处理的东西，这里主要开发时候在控制台查看一些处理日志， vuex本身自带,其他没有研究过。

mutation-types

定义mutation里用到的方法常量值，统一处理在这里，一般都是业务字符串常量。

// 设置查询分组值
export const SET_SEARCH_GROUP_VAL = 'SET_SEARCH_GROUP_VAL'
// 清除查询值
export const CLEAR_SEARCH_VAL = "CLEAR_SEARCH_VAL"
// 修改查询值
export const UPDATE_SEARCH_VAL = "UPDATE_SEARCH_VAL"

store

store.js核心文件，这里就是vuex基本的写法了，先引用vue和vuex 然后user(Vuex),把定义好的modules,middlewares引入进来然后返回一个Vuex.store

import Vue from 'vue'
import Vuex from 'vuex'
import search from "./modules/search"
import searchGroup from "./modules/searchGroup"
import middlewares from './middlewares'

const debug = process.env.NODE_ENV !== 'production'
Vue.use(Vuex)
Vue.config.debug = debug

export default new Vuex.Store({
  modules: {
    search,
    searchGroup
  },
  strict: debug,
  middlewares
})
  • strict : 这个属性如果设置true 一旦非mutation地方修改store里的值 就会提示error,意思就别随便动我的状态