vuex(vue状态管理)使用的正确姿势

1.首先引入vuex

1.1 npm下载vuex模块

npm install vuex --save

1.2 在main.js引入

    import Vuex from "vuex" //全局引入vuex 
    import store from './vuex/store'//引入store 

1.3 在store.js 引入

    import Vue from 'vue'
    import Vuex from 'vuex'

1.3.1接着实例化一个仓库

     export default new Vuex.Store({
     	//用来存储一些变量
     	state:{
     	
    	},
    	//管理异步操作
    	 actions:{
             }
    	//如同vue单页面组件中的methods,自定义的方法
    	mutations:{
          		addcount(state, data) {
          state.CartList.forEach((item) => {
                if (item.id== data){
                  item.count++
                }
            });
        },

        minuscount(state, data) {
            state.CartList.forEach((item) => {
                if (item.id == data) {
                    item.count--
                    if (item.count <= 1) {
                        item.count = 1
                    }
                }
            });
          },
          //如同组件中 计算属性 和vue中filter,调用方法返回一个值
          getters: {
          		totalmoney(state) {
           		 	let shop = {
                		count: 0,
                		totalprice: 0
           		 }
           		 state.CartList.forEach(item => {
               		 if (item.checked) {
                    	shop.count += item.count //footer下的角标
                    /**
                     * @param totalmoney
                     * 计算购物车总价
                     */
                    	shop.totalprice += item.price * item.count
               	 	}
           		 })
                return shop
       	 },
    	}
    })

2.页面调用vuex的方法

调用mutations的方法并传参

     addcount(idx){
        
                this.$store.commit("addcount",idx)
             },
              minuscount(idx){
                this.$store.commit("minuscount",idx)
             },

调用getters的方法并取计算后的值

在这里插入图片描述

基本就是vuex最简单的应用了…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值