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,意思就別隨便動個人狀態

源碼地址