vue学习总结最后一天

一.路由的使用

二.vuex的使用

1.Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的数据，并以相应的规则保证数据以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

下面演示使用公共仓库的方式来做项目:

a.抽取vuex用来做公共仓库进行开发

b.在main.js中引入并挂载在vue实例上

c.引入样式.效果如下:

d.在index.vue中的a添加add2Cart方法,进行提交数据(也叫提交载荷)

    // 单击的方法
    methods: {
        // fruit是上面传过来的item
        add2Cart(){
            // 提交载荷
            this.$store.commit('add2Cart',fruit)//因为vuex是写在main.js里,在别的地方使用要用this.$
        }
    }

e.回到仓库store.js,完善代码

//二.仓库代码:
//1.准备
//导入vue
import Vue from 'vue'

//导入vuex
import Vuex from 'vuex'
//use一下

Vue.use(Vuex)

// 2.实例化仓库
const store = new Vuex.Store({
  //仓库数据
  state: {
    //购物车的数据
    cartData: {} //记得要用对象
  },
  //使用Vuex的计算属性
  getters:{
         // 总数
    totalNum(state) {
        let num = 0;
        // 计算总个数
        for (const key in state.cartData) {
          num += state.cartData[key].num
        }
  
        // 返回数据即可
        return num;
      }
    },

  //对外暴露的修改方法
  mutations: {
   add2Cart(state,fruit) {
        //如果购物车有则累加
        if(state.cartData[fruit.name]){
            state.cartData[fruit.name].num++;
        }else{

            //如果购物车没有则新增一个字段
            // state.cartData[fruit.name]=fruit;坑
            Vue.set(state.cartData,fruit.name,fruit)
            //同时增加个数
            // state.cartData[fruit.name].num
            Vue.set(state.cartData[fruit.name],'num',1)
        }

    }
  }
})

//3.暴露出去

export default store;

f:App.vue中使用vuex的计算属性:

最终效果: