vuex状态管理插件

拼搏现实的明天。 2022-01-15 20:21 256阅读 0赞

## vuex状态管理插件 ##

*  什么是vuex
    
    > vue状态管理插件,集中式存储管理应用的所有组件的状态，某个组件改变了状态数据其它组件跟着发生变化。
 *  核心
    
    > **Vue Components**：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。  
    > dispatch：操作行为触发方法，是唯一能执行action的方法。
    
    > **actions**：操作行为处理模块,由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
    
    > **commit**：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
    
    > **mutations**： 状态改变操作方法，由actions中的commit(‘mutation 名称’)来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
    
    > **state**：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
    
    > **getters**：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

### 步骤 ###

**1. 安装vuex**

npm install vuex -S

**2. 在src下创建store.js模块文件**

import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    let store=new Vuex.Store({ 
        state:{  
            count:0
        },
        mutations:{ 
            add(state){   //定义一个函数是count的值++
                state.count++;
            },
            reduce(state){ 
                state.count--;
            }
        },
        actions:{ 
            plus({ commit,state}){ 
                commit('add')
            },
            minus({ commit,state}){ 
                commit('reduce')
            }
        },
    
        getters:{ 
            getCount(state){ 
                return state.count
            }
        }
    })
    
    export default store;

**3. 在入口文件app.js集成vuex**

import Vue from 'vue'
    // import vueRouter from './router'
    import App from './App.vue'
    import Main from './view/Main.vue'
    import SideBar from './view/SideBar.vue'
    import store from './store.js'
    
    
    Vue.prototype.$store=store;  // 所有vue实例都可以调用$store
     
    // Vue.use(vueRouter);
    
    Vue.component('MainA', Main);  //全局注册组件
    Vue.component('SideBar', SideBar);  //全局注册组件
    
    new Vue({ 
        el: '#app',
        store,
        // router, // 4.vue集成路由
        render: c => c(App)
    })

**4. 组件中使用**

//这是在main组件中使用
    methods:{ 
        onChangeClick(){   //定义的函数，通过template中的button标签 v-on:click="onChangeClick"
            // 修改vuex中状态数据
            this.$store.dispatch('plus'); // state状态管理器中count加一
            this.total = this.$store.getters.getCount; // 获取state状态count值
        },
        onMinusClick(){ 	定义的函数，通过template中的button标签 v-on:click="onMinusClick"
            this.$store.dispatch('minus');
        }
      }
    
    //SideBar组件中调用实现两个组件之间的通讯
    
    computed:{   //通过计算属性将total值得到，然后在template标签中显示出来{ {total}}
           total(){ 
               return this.$store.getters.getCount
           }
       }