Vuex 状态机

一、概念

Vuex，是 Vue 官方推出的“状态管理模式”。

“状态”，实际上指的就是数据。主要用于管理项目中的公共数据。

二、五大核心属性

1. state：保存公共数据；
2. getters：保存从 state 中衍生出来的数据，作用类似于组件中的 computed；
3. mutations：保存修改 state 的方法；
4. actions：保存公共的异步方法；
5. modules：将一个仓库拆分成多个模块；

三、vuex使用

1. 安装 vuex, 与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。

   npm i vuex@3.4.0

2. 新建 store/index.js 专门存放 vuex
   • 为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)
3. 创建仓库 store/index.js

   // 导入 vue
   import Vue from 'vue'
   // 导入 vuex
   import Vuex from 'vuex'
   // vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
   Vue.use(Vuex)
   
   // 创建仓库 store
   const store = new Vuex.Store()
   
   // 导出仓库
   export default store

4. 在 main.js 中导入挂载到 Vue 实例上

   import Vue from 'vue'
   import App from './App.vue'
   import store from './store'
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
     store
   }).$mount('#app')

四、state 的使用 

• state 

1、保存数据

export default new Vuex.Store({
  state: {
    userInfo: {
      username: "张三",
    },
  },

2、组件获取数据

<p>
    {{$store.state.userInfo.username}}
</p>

<script>
export default {
    computed:{
        username(){
            return this.$store.state.userInfo.username
        }
    }
}
</script>

五、getters 的使用

1、设置 getters

里面都是方法，每个方法第一个参数都是state，拿到 state 只能用不能改

export default {
    getters: {
        username(state) {
            return state.userInfo.username;
        },
    },
}

2、组件获取 getters

<p>
    {{$store.getters.username}}
</p>

六、mutations 的使用

mutations 用来设置修改 state 的方法，这些方法都只能是同步方法。

推荐用纯大写

state 是自带的，payload 是外部传进来的值

1、设置 mutations 方法

export default {
    mutations: {
        SET_USER_INFO(state, payload) {
            state.userInfo = payload;
        },
    },
}

2、调用 mutations 方法

created() {
    this.$store.commit('SET_USER_INFO',{username:"李四"});
},

注意：mutations 的方法是唯一修改 state 的方法。

七、actions 的使用

1、设置 actions 方法

export default new Vuex.Store({
    actions: {
        async getMajorsAsync(context, payload) {
            const res = await api.majors.get();
            console.log(res);
        }
    }
})

2、调用 actions方法

this.$store.dispatch('getMajorsAsync');

3、处理请求结果

在 actions 方法中请求到的 结果，有两种方法：

1. 将数据保存到 state；
2. 将数据通过 return 返回；

(1)、将数据保存在 state

export default new Vuex.Store({
    state: {
        majors: []
    },
    mutations: {
        SET_MAJORS(state, payload) {
            state.majors = payload.rows;
        }
    },
    actions: {
        // context 代表拿到的整个仓库对象 ； payload 为接收的外部传递的参数，需要就传不需要就不传
        async getMajorsAsync(context, payload) {
            const res = await api.majors.get();
            if (res.code) {
                // 调用 mutations 的方法
                context.commit('SET_MAJORS', res.data);
            }
        }
    }
})

说明：因为 Vuex 中只能通过 mutations 去修改 state，因此，如果要将 actions 中的数据保存到 state，必须在 actions 中调用 mutation 的方法

八、modules 模块化

模块化，就是对仓库中的数据进行分类管理

1、创建模块的目录

src
    |---store
    |	|---modules
    |	|	|---majors.js	#专业模块
    |	|	|---classes.js	#班级模块
    |	|	|---students.js	#学生模块
    |	|	|--- ...
    |	|---index.js		#主仓库

2、配置模块

import api from '@/api';
export default {
    namespaced: true,    // 解决命名空间冲突
    state: {
        majors: []
    },
    mutations: {
        SET_MAJORS(state, payload) {
            state.majors = payload.rows;
        }
    },
    actions: {
        async getMajorsAsync(context, payload) {
            const res = await api.majors.get();
            if (res.code) {
                // 调用 mutations 的方法
                context.commit('SET_MAJORS', res.data);
            }
        }
    }
}

3、主仓库引入模块

import majors from './modules/majors.js'
export default new Vuex.Store({
    modules: {
        majorsModule: majors
    }
})

4、组件中操作模块

(1)、获取模块 state

this.$store.state.模块名.数据名

(2)、调用模块 actions

this.$store.dispatch('模块名/方法名')

(3)、获取模块 getters

this.$store.getters['模块名/方法名']

(4)、获取模块mutation

this.$store.commit('模块名/方法名')