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模式就是如图这样做到的。
前端工程师、程序员