菜鸟式VueX状态的使用

1、定义

在stote文件夹下面的index.js中的"state"中定义变量
然后在"mutations"定义函数
如下图所示

export default new Vuex.Store({
    state: {
    	//存放全局变量名
        count: 0 //购物车数量
    },
    mutations: {
    	//存放方法
    	//state必须存在
        sum(state,'可放其他形参') {
				//逻辑
                api.getCard().then(res => {
                    window.console.log('购物车', res);
                    state.count = res.shopList.length;
                    window.console.log(state.count)
                }).catch(err => {
                    window.console.log(err)
                })
            }
        }
    },
    actions: {},
    modules: {}
})

2、调用

1、先调用方法:this.$store.state.commit('函数名')
2、在渲染:$store.state.变量名
在自己要使用的组件中调用
我这里是在mounted中调用

 mounted() {
 			//先调用方法 
          this.$store.commit('sum',形参);
  },

3、 在computed中引用
渲染时 直接this.$state.变量名

html代码

   <van-tabbar-item  icon="shopping-cart-o" to="/shoppingcar" 
   v-else  :badge='$store.state.count'>购物车</van-tabbar-item>

js代码

 computed: {
    getTag() {
      return this.$store.state.tag1;
    }
  }