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最简单的应用了…