vue+vuex+axios從後台擷取資料存入vuex，組件之間共用資料

標籤：pos   api   erro   流程   this   建立   getter   mis   sga   

在ｖｕｅ項目中組件間相互傳值或者後台擷取的資料需要供多個組件使用的情況很多的話，有必要考慮引入ｖｕｅｘ來管理這些淩亂的狀態，今天這邊博文用來記錄這一整個的過程，後台ａｐｉ介面是使用ｗｅｂｐａｃｋ－ｓｅｒｖｅｒ類比的介面，這個前面的文章中有提到，需要的可以去翻閱。

整個的流程是在組件的ｃｒｅａｔｅｄ中提交ｄｉｓｐａｔｃｈ，然後通過ａｃｔｉｏｎ調用一個封裝好的ａｘｉｏｓ然後再觸發ｍｕｔａｔｉｏｎ來提交狀態改變ｓｔａｔｅ中的資料，然後在組件的計算屬性中擷取ｓｔａｔｅ的資料並渲染在頁面上

首先新需要在項目中安裝ｖｕｅｘ：

運行命令　ｎｐｍ　ｉｎｓｔａｌｌ　ｖｕｅｘ　－－ｓａｖｅ－ｄｅｖ

在項目的入口ｊｓ檔案ｍａｉｎ．ｊｓ中

import store from ‘./store/index‘

並將ｓｔｏｒｅ掛載到ｖｕｅ上

new Vue({  el: ‘#app‘,  router,  store,  template: ‘<App/>‘,  render: (createElement) => createElement(App)})

這裡我建立了檔案夾ｆｅｔｃｈ用來編寫所有的ａｘｉｏｓ處理和ａｘｉｏｓ封裝

在ｆｅｔｃｈ檔案夾下建立ａｐｉ．ｊｓ檔案：

import axios from ‘axios‘export function fetch(url, params) {    return new Promise((resolve, reject) => {        axios.post(url, params)            .then(response => {                 alert(‘Api--ok‘);                resolve(response.data);            })            .catch((error) => {              console.log(error)               reject(error)            })    })}export default {  // 擷取我的頁面的後台資料  mineBaseMsgApi() {     alert(‘進入api.js‘)    return fetch(‘/api/getBoardList‘);  }}

在ｓｔｏｒｅ的入口檔案ｉｎｄｅｘ．ｊｓ中：

 

import Vue from ‘vue‘import Vuex from ‘vuex‘import mine from ‘./modules/mine‘;Vue.use(Vuex);export default new Vuex.Store({  modules: {    mine  }});

在你需要請求後台資料並想使用ｖｕｅｘ的組件中的ｃｒｅａｔｅｄ分發第一個ｄｉｓｐａｔｃｈ：

created() {    this.$store.dispatch(‘getMineBaseApi‘);  }

然後在ｓｔｏｒｅ／ｍｏｄｕｌｅｓ下的對應模組ｊｓ檔案中，這裡我使用的ｍｉｎｅ．ｊｓ檔案中編寫ｓｔａｔｅ、ａｃｔｉｏｎ和ｍｕｔａｔｉｏｎ

import api from ‘./../../fetch/api‘;import * as types from ‘./../types.js‘;const state = {  getMineBaseMsg: {    errno: 1,    msg: {}  }}const actions = {  getMineBaseApi({commit}) {    alert(‘進入action‘);    api.mineBaseMsgApi()    .then(res => {        alert(‘action中調用封裝後的axios成功‘);        console.log(‘action中調用封裝後的axios成功‘)        commit(types.GET_BASE_API, res)    })  }}const getters = {  getMineBaseMsg: state => state.getMineBaseMsg}const mutations = {  [types.GET_BASE_API](state, res) {    alert(‘進入mutation‘);    state.getMineBaseMsg = { ...state.getMineBaseMsg, msg: res.data.msg }    alert(‘進入mutations修改state成功‘);  }}export default {  state,  actions,  getters,  mutations}

　然後在想取回ｓｔａｔｅ的組件中使用ｍａｐＧｅｔｔｅｒｓ擷取ｓｔａｔｅ：

import { mapGetters } from ‘vuex‘;export default {  ．．．  computed: {    ...mapGetters([      ‘getMineBaseMsg‘    ])  }，  ．．．      ｝

然後在控制台查看把：

ｇｅｔｔｅｒ和ｍｕｔａｔｉｏｎ都已經成功了，同時我在提交ｓｔａｔｅ的整個過程都添加了ａｌｅｒｔ，大家可以看看整個流程是如何走的；

來源： http://www.cnblogs.com/jasonwang2y60/

　　

　

　　

　　

vue+vuex+axios從後台擷取資料存入vuex，組件之間共用資料