vuex教程，vuex使用介紹案例

1.demopageaction:

import Vue from "vue";
import Store from "../../store.js";
import { apiGET, apiPOST } from "../../../utils/ajax.js";
import * as mtypes from '../../constants/mutation-types';
import * as rmtypes from "../../constants/request-types.js";
import * as utypes from "../../constants/url-types.js";
import isEmpty from "lodash/isEmpty";
import qs from "qs";
import { emptyPage } from "../../../utils/help.js"


export function getAgentsListData({
	commit
}, params) {
	apiGET(utypes.GET_AGENTS_LIST_DATA+params, rmtypes.GET_AGENTS_LIST_DATA, (res) => {
		commit(mtypes.SET_AGENTS_LIST_DATA, res);
	},emptyPage)
}

export function getAgentDetail({
	commit
}, params) {
	if (!isEmpty(Store.state.agentsModule.agentDetailAll[params])) {  //這裏判斷store中是否有數據，有的話就不在請求了
		commit(mtypes.SET_AGENT_SAVED_DETAIL, params);
		return;
	}
	apiGET(utypes.GET_AGENT_DETAIL_INFO+params, rmtypes.GET_AGENT_DETAIL_INFO, (res) => {  //咱們能夠在action中請求數據，而後commit給store
		commit(mtypes.SET_AGENT_DETAIL_INFO, {res:res,id:params});
	},emptyPage)
}

export function initAgentDetail({  //基本上action就是這樣子，經過commit來改變store中的數據
	commit
}, params) {
	commit(mtypes.SET_AGENT_INIT_DETAIL,'')
}

　　

2.actions集合：

import { setReqState } from "./request/index.js"
import {setTipMsg} from "./stateTip/index.js"
import {getDomainListData,getDomainItemMore,getQrcode,initQrcode} from "./domainList/index.js"
import {getAgentsListData,getAgentDetail,initAgentDetail} from "./agents/index.js"
import {postTradeDomain,postSellDomain,postTellUsNews} from "./form/index.js"
export default {
    setReqState,
    setTipMsg,
    getDomainListData,
    getDomainItemMore,
    initAgentDetail,
    getQrcode,
    initQrcode,
    getAgentsListData,
    getAgentDetail,
    postTellUsNews,
    postTradeDomain,
    postSellDomain,    //本人把分開的action這樣集合在一塊兒
};

　　

3.vuex啓動action:

import Vue from 'vue'
import Vuex from 'vuex'

import actions from './actions/index'
console.log(actions, 'actions=============')

// modules 模塊分類
import request from "./modules/request/index.js"
import stateTip from "./modules/stateTip/index.js"
import domainListModule from "./modules/domainList/index.js"
import agentsModule from "./modules/agents/index.js"
import formModule from "./modules/form/index.js"

Vue.use(Vuex)

Vue.config.debug = true

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
	strict: debug,
	actions,  //第2步中集合的action就在這裏啓動
	modules: {
		request,
		stateTip,
		domainListModule,
		agentsModule,
		formModule
	}
})

　　

4.接下來是個別的store:

import * as types from '../../constants/mutation-types.js'
import Vue from "vue"
import Store from "../../store.js";
const state = {
	agentsListData: null,
	agentDetailAll: {},
	agentDetailInfo: null,
	sucCase: []
}

const mutations = {
	[types.SET_AGENTS_LIST_DATA](state, data) {  //store主要是來存儲action發送的數據，而後再給view讀取
		state.agentsListData = data;
	},
	[types.SET_AGENT_DETAIL_INFO](state, data) {
		state.agentDetailAll[data.id] = data.res;
		state.agentDetailInfo = data.res;
		state.sucCase = state.agentDetailInfo.AgentSucCase.split(',');
		console.log(state.sucCase,"succase")
	},
	[types.SET_AGENT_SAVED_DETAIL](state, id) {
		state.agentDetailInfo = state.agentDetailAll[id];
		state.sucCase = state.agentDetailInfo.AgentSucCase.split(',');
	},
	[types.SET_AGENT_INIT_DETAIL](state, data) {
		state.agentDetailInfo = null;
	},
}
const getters = {

};
export default {
	state,
	mutations,
	getters
}

　　

5.集合store,啓動store：

import Vue from 'vue'
import Vuex from 'vuex'

import actions from './actions/index'
console.log(actions, 'actions=============')

// modules 模塊分類
import request from "./modules/request/index.js" //導入每一個獨立的store
import stateTip from "./modules/stateTip/index.js"
import domainListModule from "./modules/domainList/index.js"
import agentsModule from "./modules/agents/index.js"
import formModule from "./modules/form/index.js"

Vue.use(Vuex)

Vue.config.debug = true

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
	strict: debug,
	actions,
	modules: {
		request, //這裏啓動每一個獨立的store
		stateTip,
		domainListModule,
		agentsModule,
		formModule
	}
})

　　

 

 

 

總結:上面幾部基本上就是一個vuex的使用流程了。

接下來咱們看下view中的引入：

<template>
	<div class="bg">
		<Loading v-if="reqState.GET_AGENTS_LIST_DATA"></Loading>
		<div class="list-box" v-else>
			<div class="agent" v-for="(item,index) in agentsListData">
				<router-link :to="{name:'agentdetail',query:{id:item.AgentId},params:{sex:sex}}" class="flex">
					<div class="port-box">
						<img v-if="item.AgentIsChampion==1" src="../../assets/images/huangguan.png" width="20" height="21" class="crown" />
						<div class="port-img" :class="item.AgentIsChampion==1?'port-crown':''"><img width="70px" :src="item.AgentAvatar" /></div>
						<div class="port-name"><span class="ng-binding">{{item.AgentNick}}</span></div>
					</div>
					<div class="agent-info flex1">
						<div class="wx flex">
							<i class="icon"></i>
							<div class="title-info flex1">
								<p class="name">{{item.AgentWeixin}}</p>
								<p class="tit">微信</p>
							</div>
						</div>
						<div class="ph flex">
							<i class="icon"></i>
							<div class="title-info flex1">
								<p class="name"><a href="">{{item.AgentTel}}</a></p>
								<p class="tit">手機</p>
							</div>
						</div>
					</div>
				</router-link>
			</div>
		</div>
	</div>
</template>
<script>
import { mapActions, mapState } from "vuex"
import isEmpty from "lodash/isEmpty";
export default {
	data() {
		return {
			sex: 0 //0表明女
		}
	},
	mounted: function() {
		let that = this;
		if (this.$route.name == "agentsboy") {
			this.sex = 1;
			if (!isEmpty(that.agentsListData)) return;
			this.getAgentsListData(1)  //觸發導入的action的名稱
		} else {
			this.sex = 2;
			if (!isEmpty(that.agentsListData)) return;
			this.getAgentsListData(2)
		}
	},
	methods: {
		...mapActions([  //這裏讀取vuex的action，引入須要的action
			'getAgentsListData',
		]),
	},
	computed: {
		...mapState({   //這裏是讀取store中的每一個存儲的變量
			agentsListData: state => state.agentsModule.agentsListData,  //agentsModule就是表明獨立的那個store模塊，下的哪一個存儲變量

reqState: state => state.request }), }, } </script> <style scoped rel="stylesheet/scss" lang="scss"> </style>

　　以上就是vuex在view中的基本引入，主要是經過mapState來導入須要的module，mapActions來導入須要的action名稱，而後在頁面中使用.

 

基本上vuex的使用思路就是在view中觸發action，而後action再經過vuex提供的改變store的方法的commit來改變store中的變量，store中變量的改變就會觸發view的改變，這就是一種mvvm模式.

mvvm就是model、modelview、view，具體本身百度這個模式。

vuex中action表明的角色就是modelview，負責做爲view和store的中間人，view不能直接改變store，只能讀取，因此store是單向流向view的。action能夠讀取store中的數據，也能夠改變store中的數據，固然得須要用vuex提供的方法來改變和讀取，好比commit負責改變store中的數據，讀取的話，能夠經過store總接口來讀取，好比:

Store.state.agentsModule.agentDetailAll[params]

這裏的store就是vuex總的接口，這個接口能夠作不少事情，好比讀取module裏的數據或觸發action等。

 

 基本mvvm模式就是如圖這樣作到的。