Vuex模块化使用

一、概览

1、Vuex是什么

专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理）
采用集中式存储管理应用的所有组件的状态
以相应的规则保证状态以一种可预测的方式发生变化
2、状态
组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 )
应用级别状态：多个组件共用的状态（将这个状态放入vuex中进行管理）
3、什么情况下使用Vuex
多个视图（组件）依赖同一状态
来自不同视图（组件）的行为需要变更同一状态

二、Vuex核心概念

1、store：类似容器，包含应用的大部分状态
一个页面只能有一个容器
状态存储是响应式的
不能直接改变store中的状态，唯一途径显示地提交mutations
在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值；如果要再次请求异步，那么就是dispatch一个actions
2、State：包含所有应用级别状态的对象
3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed
4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions
5、Actions：包含异步操作、提交mutations改变状态
6、Modules：将store分割成不同的模块

三、使用

1. 安装Vuex

npm install vuex --save

2. 为了项目格式便于维护和相对规范一点
我们先在 目录下建立一个 store 文件夹，并且在下面建立一个 index.js 文件，随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，所以同时创建子目录modules，这里为了演示方便我直接创建好了一个子模块daySurgeryIntro,同时创建好了对应的文件，后面会具体讲。

3. 引用Vuex
在index文件引入 Vue 和 Vuex 并且 Vue.use(Vuex)，并且在modules节点下注册daySurgeryIntro模块

import Vue from 'vue'
import Vuex from 'vuex'
import daySurgeryIntro from "./modules/daySurgeryIntro/index";

Vue.use(Vuex)

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        daySurgeryIntro
    }
})

4. 在Vue （main.js）实例上得将 挂载 store

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

5. 目录文件拆分详细

1. index.js

import actions from './actions'
import getters from './getters'
import mutations from './mutations'
const state = {
  index:0,

  //患者信息list
  patientQueryTableData: [],

  //患者票据信息list
  patientinfoTableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '中医科病区'
  }, {
    date: '2016-05-02',
    name: '王小虎',
    address: '中医科病区'
  }, {
    date: '2016-05-02',
    name: '王小虎',
    address: '中医科病区'
  }, {
    date: '2016-05-02',
    name: '王小虎',
    address: '中医科病区'
  }],
  //当前患者
  patientinfo:{
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: ''
}
}

export default {
  state,
  actions,
  getters,
  mutations
}

在index文件中，我们引入了actions,getters,mutations，定义了state。并且在export导出了这些变量，用于在store的index文件中的modules节点下注册上。

2. getters.js

const getters = {
   patientQueryTableData: state => state.patientQueryTableData,
   patientinfoTableData: state => state.patientinfoTableData,
   patientinfo: state => state.patientinfo,
}

export default getters

在getters.js文件中，我们定义了对应的类似于计算属性的变量

3. mutation-type.js

const type = {
  PATIENTQUERYTABLEDATA: 'PATIENTQUERYTABLEDATA',
  PATIENTINFO: 'PATIENTINFO',

}

export default type

在mutation-type.js中 里面存放所有的types，用来action和mutations的匹配后续在action异步刷新属性的时候可以通过type来指定刷新的state

4. mutations.js

import Type from './mutation-type'
const mutations = {
  [Type.PATIENTQUERYTABLEDATA]: (state, data) => {
    state.patientQueryTableData = data
  },
    [Type.PATIENTINFO]: (state, data) => {
        state.patientinfo = data
    }
}
export default mutations

在mutation.js中，我们定义了修改仓库 store中的状态的方法，同时引入了type,方便与action.js中的方法一一对应。

5.action.js

import Type from './mutation-type'
import daySurgeryIntroApi from '@/api/orderReceive/daySurgeryIntro'

const action = {

    //不调用接口请求数据
    setPatientinfo: ({commit}, row) => {
        commit(Type.PATIENTINFO, row)
        // request.get(`gzbmj/gwcl/old/gethtml.json?ID=${ID}`).then((result) => {
        //
        // }).catch((error) => {
        //   console.log('error: ', error)
        // })
    },
  
   //调用接口请求数据
    getpatientQueryTableData: ({commit}, data) => {
        daySurgeryIntroApi.getpatientQueryTableData(data).then(res => {
            if (res.code == 200) {
                commit(Type.PATIENTQUERYTABLEDATA, res.entitys)
            }
        }).catch((error) => {

            console.log('error: ', error)
        })

    } ,
    //action中可以有不刷新数据的方法，前提是不调用commit方法
     getZW: ({ commit }, param) => {
       request.get(`gzbmj/gwcl/old/getZW.json?fileName=${param.filename}&PID=${param.PID}`).then((result) => {
       }).catch((error) => {
         console.log('error: ', error)
       })
     }
}

export default action

在action.js中 我们同样引入了type变量，来与mutation.js中的方法一一对应。

6. 在组件中使用

运用vuex语法糖mapMutations和mapGetters

import {mapGetters, mapActions} from 'vuex'

在计算属性computed函数中引入state变量

computed: {
    ...mapGetters({
      tableData: 'patientQueryTableData',
    })
  },

在方法methods函数中引入action的刷新方法

methods: {
    ...mapActions([
      'setPatientinfo',
      'getpatientQueryTableData'
    ])
    }

这样我们在使用state中的变量就如同使用data中定义的变量一样，使用action中的变量就如同使用methods中定义的变量一样。