vuex入门实例(1/3)

前言

该代码示例使用的vue相关资源 详细看package.json 核心(vue+vuex)
其他相关参考jackblog 工程(使用了该项目的gulp和webpack配置)

• Vuejs

• Vuex

• Vue-resource

• bootstrap-material-design

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
  }
})

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,意思就别随便动我的状态

源码地址