vuex 模块化

文件结构

注意事项

模块内部的action、mutation、getter是注册在全局命名空间的，如果你在moduleA和moduleB里分别声明了命名相同的action或者mutation或者getter（叫some），当你使用store.commit('some')，A和B模块会同时响应。所以，如果你希望你的模块更加自包含和提高可重用性，你可以添加namespaced: true的方式，使其成为命名空间模块。当模块被注册后，它的所有getter，action，mutation都会自动根据模块注册的路径调用整个命名

两种调用的比较，一个是使用了命名空间，一个没有使用，基本的三种调用方式

使用命名空间可以简化每个模块的命名难度，包括state和各种操作，就不需要使用模块名作为区分

      // mutations
      this.$store.commit('movie/addMovie', 123)
      this.$store.commit('addReview', 456)

      // getters
      console.log(this.$store.getters['movie/getMovies']())
      console.log(this.$store.getters.getReviews())

      // state
      console.log(
        this.$store.state.movie.movie_list,
        this.$store.state.review.review_list,
      )

store

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import movie from './modules/movie'
import review from './modules/review'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    movie,
    review,
  }

})

export default store

movie

import {ADD_MOVIE} from '../mutation-types'

const state = {
  movie_list: [],
  collection: [],
}
const mutations = {
  [ADD_MOVIE](state, movie) {
    state.movie_list.push(movie)
  }
}


const getters = {
  getMovies: (state, getters) => () => state.movie_list
}


const movie = {
  namespaced: true,
  state,
  mutations,
  getters,
}


export default movie

review

import {ADD_REVIEW} from '../mutation-types'

const state = {
  review_list: [],
  collection: [],

}
const mutations = {
  [ADD_REVIEW](state, review) {
    state.review_list.push(review)
  }
}
const getters = {
  getReviews: (state, getters) => () => state.review_list
}


const review = {
  state,
  mutations,
  getters,
}
export default review

猜你喜欢