VueX学习 - 状态管理

1. 概述

1. 使用场景：多个组件之间的数据需要保持一致 - 即组件之间的沟通
 
2. 原理：有个仓库存储数据，所有组件共享该仓库存储的数据，一旦该仓库数据改变，所有跟该仓库数据绑定的的值都动态的进行改变，不用每次都发送$emit进行改父组件的值依次进行传递。
 
3. @：表示src目录下

 

2. 传统Vue组件传值

下列的场景不断的通过子组件发送$emit(“自定义事件”) 进行修改父亲的值 - 实在是太麻烦了

 
 

 
 

上图购物车场景的数据流通图

3. 使用Vuex

1. 步骤1 - 安装vuex

npm install vuex --s

 

2. 入口main.js添加下列代码

import Vuex from "vuex";
Vue.use(Vuex);

var store1 = new Vuex.Store({
    
    

    state: {
    
    
        //键值对 - 仓库存储的值
        totalcount: 1,
        cartsList: []
    },
    
    
    // 其实就是相当于state了，不够其又不是state。使用时像state里使用即可
    // this.$store.getters.cartPriceSum
    getters: {
    
    
       
       // 默认参数为state
        cartPriceSum( state ) {
    
    
          var sum = 0;

          state.cartsList.forEach((item,index) => {
    
    

            if(item.isClick == true) {
    
    
              sum = sum + item.num * item.product.current_price
            }
          }) 

          return sum;

        }
    
  },
     
    // 修改state数据 --  this.$store.commit("方法名",  方法调用传的参数)
    mutations: {
    
    
    
        //第一个默认参数为state，第二个参数payload为调用者传的实参
        updatecount(state, payload) {
    
    
            state.totalcount = payload
        }
    },
    
    //处理ajax请求 调用  this.$store.dispatch("方法")
    actions: {
    
    
        //根据自己的需求写默认参数
        //默认参数context:{ state,rootState,commit,dispatch, getters }
        method1( {
    
    state,rootState,commit,dispatch, getters} ){
    
    
            发送ajax请求
        }
        
        // payload - 方法调用者传过来的实参
        method2( {
    
     state, commit }, payload ) {
    
    
            发送ajax请求
        }
        
    }

})


//在Vue实例中进行挂载这个数据共享仓库
new Vue({
    
    
    store: store1;
})

 

3. 使用

//各组件获取仓库的值：
{
    
    {
    
     this.$store.state.属性 }}


//修改仓库的值，则必须使用仓库的mutations内的方法进行修改
this.$store.commit("方法名", payload对象);
this.$store.commit({
    
     type:"方法名", 传的参数变量: 参数值  } ]

// 调用actions方法
this.$store.dispatch("方法名", payload对象)