Vue组件：Vuex的使用及简化使用，模块化命名空间

Vuex

集中式的状态管理，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex官网：https://vuex.vuejs.org/zh/guide/

• state：初始数据
• actions：请求接口数据
• Mutations：修改数据

Vuex的使用

1. 安装Vuex

   npm i [email protected]   (不带版本报错)
   

2. 准备vuex配置文件

   在src同级目录下创建目录store，新建配置文件(index.js)

   // vuex配置文件
   // 导入Vue核心库
   import Vue from "vue";
   // 引入Vuex
   import Vuex from 'vuex';
   // 应用vuex；vue加载vuex
   Vue.use(Vuex)
   
   // 准备Actions：响应组件中用户的作用（业务）
   const actions={
   
   }
   // 准备mutations: 修改state中的数据
   const mutations={
   
   }
   
   // 准备state： 保存初始数据
   const state={
   
   }
   // 将vuex仓库暴漏出去
   export default new Vuex.Store({
       actions,
       mutations,
       state
   })
   

3. 在main.js中配置

   import Vue from 'vue'
   import App from './App.vue'
   // 1.引入vuex配置文件
   import store from "@/store";
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
     store   // 2.将配置文件加载到vue上
   }).$mount('#app')
   

入门案例：

案例一：取出Vuex中的数据

1. 在vuex配置文件中的state中配置一个sum

   // 准备state： 保存初始数据
   const state={
   	sum:1024
   }
   

2. 创建一个组件，并拿vuex中的sum值

3. 在App.vue中注册组件

   此时启动服务，访问就能看到sum的值

案例二：对sum进行求和操作

1. 组件Count

2. vuex配置文件

   // vuex配置文件
   // 导入Vue核心库
   import Vue from "vue";
   // 引入Vuex
   import Vuex from 'vuex';
   // 应用vuex；vue加载vuex
   Vue.use(Vuex)
   
   // 准备Actions：响应组件中用户的作用（业务）
   const actions={
       addOdd(context,value){
           if(context.state.sum %2 !=0){
               context.commit('add',value)
           }
       },
       addWait(context,value){
           setTimeout(()=>{
               context.commit('add',value)
           },1000)
       }
   }
   // 准备mutations: 修改state中的数据
   const mutations={
       add(context,value){
           state.sum += value;
       },
       sub(context,value){
           state.sum -= value;
       }
   }
   
   // 准备state： 保存初始数据
   const state={
       sum:0
   }
   
   const getters={
       doubleSum(){
           return state.sum * 2;
       }
   }
   
   export default new Vuex.Store({
       actions,
       mutations,
       state,
       getters
   })
   

   参数context是上下文对象，可以通过context拿到state，mutations等

3. App.vue中组测组件

简化Vuex的使用

简化读取

1. 在组件中导入vuex
2. 借助mapState生成计算属性，直接读取

简化方法

1. 在组件中导入vuex：mapMutations，mapActions
2. 借助mapMutations生成方法
3. 调用时传参，事件绑定处传参

模块化命名空间

当有多个组件，多个Vuex时，都在一个Vuex中配置不方便管理；一个组件一个Vuex管理，再在主Vuex配置中配置即可，即模块化命名空间

实现步骤：

1. 在src同级目录下创建store目录

2. 在store目录下创建各个组件的配置文件，如count.js、student.js

   count.js

   export default {
       // 开启命名空间
       namespaced: true,
       actions:{
           addOdd(context,value){
               if(context.state.sum %2 !=0){
                   context.commit('add',value)
               }
           },
           addWait(context,value){
               setTimeout(()=>{
                   context.commit('add',value)
               },1000)
           }
       },
       mutations:{
           add(state,value){
               state.sum += value;
           },
           sub(state,value){
               state.sum -= value;
           }
       },
       state:{
           sum: 0
       },
       getters:{
           doubleSum(state){
               return state.sum * 2;
           }
       }
   }
   

   student.js

   import axios from "axios";
   
   export default {
       namespaced: true,
       actions: {
           addStudent(context, value) {
               if (value.name.indexOf("张") == 0) {
                   context.commit("ADD_STUDENT", value);
               } else {
                   console.log("添加学生必须姓张");
               }
           }
       },
       mutations: {
           ADD_STUDENT(state, value) {
               state.studentList.unshift(value)
           }
       },
       state: {
           studentList: [
               {id: '001', name: '王五'}
           ]
       },
       getters: {
           stuListLength(state) {
               return state.studentList.length;
           }
       }
   }
   

   常见错误：namespaced: true一定要添加，注意namespaced有个d

3. 在store目录下创建主配置文件

   导入各组件的配置文件，并以模块的形式暴露出去

   // vuex配置文件
   // 导入Vue核心库
   import Vue from "vue";
   // 引入Vuex
   import Vuex from 'vuex';
   
   // 导入
   import countOptions from './count';
   import studentOptions from './student';
   
   // 应用vuex；vue加载vuex
   Vue.use(Vuex)
   
   export default new Vuex.Store({
       modules: {
           countAbout: countOptions,
           studentAbout: studentOptions
       }
   })
   

4. main.js中加载Vuex的配置文件

   import Vue from 'vue'
   import App from './App.vue'
   // 引入vuex配置文件
   import store from "@/store";
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
     store   // 将配置文件加载到vue上
   }).$mount('#app')
   

5. 组件中的使用

   Count组件：与之之前不同的是调用时要声明在哪个命名空间的Vuex配置文件中找

   Student组件：

   方法调用的方式变为方法名前添加命名空间作为一级路径即可

6. 在App.vue中注册各个组件