前言
该代码示例使用的vue相关资源 详细看package.json 核心(vue+vuex)
其他相关参考jackblog 工程(使用了该项目的gulp和webpack配置)
vuex
一句话介绍vuex是什么,官方说明"一个专门为 Vue.js 应用设计的状态管理架构"
状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data)
实战介绍
完成一个简单搜索查询功能 效果如下
组件介绍
-
App
主程序组件 -
Search
搜索框组件 -
SearchGroup
分组类型组件 -
List
结果集合组件
组件内actions说明
(这里主要描述调用逻辑 结果都是一个list)
App
App包含了组件Search和List
searchResultList 返回结果action 直接从
actions获取放到list中
Search
Search组件中包含子组件SearchGroup 主要包含功能
searchAction
根据key进行查询action 放大镜和回车同时绑定了事件
clearAction
清除key的值action
SearchGroup
setSearchGroup
根据分组值进行查询action
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
}
})
-
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,意思就别随便动我的状态
