vue之学习使用Vuex

Vuex官网
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:
首先要安装、使用 vuex

npm install vuex --save

然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;

:接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

import store from './store'//引入store
new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

下面就开始介绍vuex里面都有哪些内容：

import Vue from 'vue';
import Vuex from 'vuex';
import Vuex from 'vuex';
import docter from './docter';
import followup from './followup';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    docter,
    followup
  },
});

主要是有五部分组成，
state 就相当于 vue中 data属性，
getters就相当于vue中的computed属性，
mutations, actions就相当于vue中的方法，只是操作方式变了而已，
modules当项目比较复杂时，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
—————————————————————————————————————————————
下面我们就介绍如何在页面中使用：
首先新建store文件，里面新建一个index.js和两个模块文件，teacher和student,分别在里面新建index.js文件。

目录

student/index.js代码

index.js代码

最后将store/index.js在mian.js进行全局注册。

在页面中使用：

import { mapGetters,mapMutations } from "vuex";
   computed: {
       ...mapGetters('student', ['getstudentInfo'])
   },
  methods: {
    ...mapMutations("student", {
      setPatientInfo: "setstudentInfo"
    }),
  }

最后通过this.getstudentInfo,this.setPatientInfo()使用