vuex模块式开发

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。统一配置管理不仅有助于我们的协同开发，也有利于提高代码的可读性。

安装

npm install --save vuex

在src目录下新增store文件夹，然后新增modules文件夹，存放每个模块的状态管理文件，然后新增action.js，getters.js，index.js，mutation.js，types.js

每个js含义如下

• types.js 内定义常量来表示事件类型
• user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations，并最后统一导出
• getters.js 内写原来的 getters ，用来获取属性
• actions.js 内写原来的 actions ，就是要执行的动作，如流程的判断、异步请求
• index.js 是用来组装 actions.js 、 getters.js 、user.js 的，然后进行统一的导出

在store文件夹下，创建一个index.js文件；还有其他子仓库

• state：仓库存储数据的地方
• mutations：修改state的唯一手段
• action：处理action，可以书写自己的业务逻辑，也可以处理异步
• getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便

import Vue from 'vue';
import Vuex from 'vuex';
// 需要使用插件一次
Vue.use(vuex);
// state: 仓库存储数据的地方
const state = {
  count: 1,
}
// mutations: 修改state的唯一手段
const mutations = {
  ADD(state){
    state.count++
  }
}
// action: 处理action,可以书写自己的业务逻辑，也可以处理异步
const actions = {
//  这里可以书写业务逻辑，但是不能修改state
  add({commit)}{
    commit('ADD')
  }
}
// getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}
// 对外暴露Store类的一个实例
export default new Vuex.Store{
  state,
  mutations,
  actions,
  getters
}

在main.js文件下引入、注册仓库

// 引入仓库
import store from '@/store'
// 注册仓库
new Vue({
  // 组件实例的身上会多一个$store属性
  store
}).$mount('#app')

组件获取store仓库中的数据，需要使用辅助函数mapState

<script>
import {mapSate} from 'vuex';
export default {
  name: "",
  components: {},
  computed: {
    ...mapState(['count'])
  },
  methods: {
    add() {
      // 派发action
      this.$store.dispatch('add')
    }
}
</script>

当需要管理的数据过多时，就需要在store大仓库下建许多小仓库

 

 index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
// 需要使用插件一次
Vue.use(Vuex)
// 引入小仓库
import home from './home'
import search from './search'

export default new Vuex.Store({
  modules: {
    home,
    search
  }
})

home子仓库下的index.js

import {reqCategoryList} from '@/api'
// home模块的小仓库
const state = {
  //state中数据默认初始值要根据接口返回值初始化
  categoryList: [],
}
const mutations = {
  CATEGORYLIST(state, categoryList) {
    state.categoryList = categoryList;
  }
}
const actions = {
//  通过API里面的接口函数调用，像服务器发请求，获取服务器的数据
  async categoryList({commit}) {
    let result = await reqCategoryList()
    if (result.code === 200) {
      commit("CATEGORYLIST", result.data)
    }
  }
}
const getters = {}
export default {
  state,
  mutations,
  actions,
  getters
}

 在组件中使用时

<script>
import {mapState} from 'vuex';

export default {
  name: 'TypeNav',
//  组件挂载完毕：可以向服务器发请求
  mounted() {
    //  通知Vuex发请求，获取数据，存储于仓库当中
    this.$store.dispatch('categoryList')
  },
  computed: {
    ...mapState({
      //右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会立即执行一次
      //注入一个参数state，其实即为大仓库中的数据
      categoryList: state => state.home.categoryList
    })
  },
}
</script>