Vuex給咱們的.vue文件結構帶來了這些變化

使用vuex先後的對比

使用vuex前

//BookRecommend.vue

<script>

import * as API from '../api/index'

export default{
  name:'bookrecommend',
  data () {
    return {
      oBRData:{}
    }
  },
  methods: {
    getBookRecommendData(){
      API.getBookRecommend()
        .then((response)=>{
          this.oBRData = response.data;
          console.log(response)
        })
        .catch((err)=>{
          console.log(err)
        })
    }
  },
  mounted () {
    this.getBookRecommendData();
  }
}

</script>

使用vuex後

//BookRecommend.vue

<script>
import { mapState } from 'vuex'

export default{
  name:'bookrecommend',
  computed: mapState([
    'index'
  ]),
  methods: {
    
  },
  mounted () {
    this.$store.dispatch('getBookRecommend');
  }
}

</script>

變化

• 剝離了state的管理

• 剝離了異步請求

• .vue文件變得更加"純粹"了

下面咱們就從幾個方面來描述一下vuex帶給咱們的變化。

剝離了state的管理

這個固然是vuex最主要的任務了。

將組件模塊的state放到了module中,這裏是放在了module/index.js中。

//module/index.js

import * as API from '../../api/index'
import * as types from '../mutation-types'

//BookRecommend.vue單文件的state管理
const state = {
    oBRData: {}
}

const actions = {
    ...
}

const mutations = {
    ...
}

export default {
    state,
    ...
}

剝離了異步請求

上一篇從交互到狀態變化的Vuex中說了actions的做用。

將異步處理也放在了module中的module/index.js中。

import * as API from '../../api/index'
import * as types from '../mutation-types'

const state = {
    oBRData: {}
}

//actions方便作異步操做,這裏是獲取數據
const actions = {
    getBookRecommend({ commit }, playload) {

        API.getBookRecommend()
            .then((response) => {
                commit(types.GET_BOOKRECOMMEND_DATA, {
                    obr: response.data
                })
                console.log(response);
            })
            .catch((err) => {
                console.log(err)
            })
    }

}

const mutations = {
    ...
}

export default {
    state,
    actions
    ...
}

Modules

這個也是上篇文章沒說的一個點,具體的見：http://vuex.vuejs.org/zh-cn/m...

最後經過new Vuex.Store將分散的module合併在一塊兒

//組裝module和跟級別的模塊並導出 store 的地方
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as mutations from './mutations'

import index from './modules/index'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        where: '發現'
    },
    actions,
    //將modules中的合併
    modules: {
        index
    },
    mutations
})

結果

這就是完整的state樹，應該很清晰。