vuex学习二

在上一篇中我们初步使用了vuex，并且在组件中实际使用了vuex。

现在，如果我们的项目分了好多模块，比如有登陆模块，有信息展示模块，有详情模块，此时如果都写在index.js中，那么我们的模块就比较臃肿，不清晰，

所以，此时就要用到vuex的moduls 来分不同的业务模块

在store文件夹下新建一个modules 文件夹，在此文件夹下我们就可以划分不同的业务模块

由此，我们将我们上一次的文件进行整理，将index.js中products模块中的东西抽离出来，单独放在modules下的products.js中
store/modules/products.js

export default {
  namespaced: true,
  state: {
    list: ['Apple', 'Bbanana', 'Peach', 'Grape']
  },
  // 所有对state的操作的方法都会放在mutations中
  mutations: {
    // state 表示当前模块的数据
    // payload 表示参数
    add (state, payload) {
      state.list.push(payload)
    }
  },
  // 异步操作
  actions: {
    // 所有的异步操作都在actions中
    // 在actions中也可以直接改变state中的数据，但是不建议这样做，因为不会被追踪到
    addAsync (context, payload) {
      setTimeout(() => {
        // context.state.list.push(payload) // 这样直接改变state不会被dev-tools 追踪到变化
        context.commit('add', payload) // commit 表示触发一个mutation
      }, 1000)
    }
  }
}

在index.js中

import Vuex from 'Vuex'
import Vue from 'vue'
import products from './modules/products' // 导入 products 模块

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 1,
    app: 'vuex-app'

  },
  // 一个单独的模块包含state, mutations, actions, getters 这些内容
  modules: {
    products // products: products
  }
})
export default store // 导出store

// 这样只在index.js中管理模块，不用写业务处理代码，而在具体的模块中写具体的业务逻辑即可