vuex

liuqimichale
1 parent e7b075f9
Showing 3 changed files with 52 additions and 14 deletions
src/components/chinaMap/index.vue
src/components/memberNum/index.vue
src/store/index.js
@@ -13,7 +13,7 @@
         <table class="parkTotalTb">
           <tr>
             <td><div class="memberTotalImg"></div></td>
-            <td><div class="infoBox"><div><countTo :startVal='memberParams.startVal' :endVal='memberParams.endVal' :duration='animationTime'></countTo></div><div>会员总数</div></div> </td>
+            <td><div class="infoBox"><div><countTo :startVal='memberParams.startVal' :endVal='$store.state.ParkingTotal' :duration='animationTime'></countTo></div><div>会员总数</div></div> </td>
           </tr>
         </table>
       </div>
@@ -32,6 +32,7 @@
 <script>
   import echarts from 'echarts'
   import countTo from 'vue-count-to';//通过设置：endVall 和 ：startVall 会自动判断计数和倒数，:duration='3000'是指完成动画的时间。
+  import {mapGetters} from 'vuex' //use commit
   export default {
     name: "chinaMap",
     components: { countTo },
@@ -53,7 +54,13 @@
         mapChart: {},
       }
     },
+    computed: {
+      ...mapGetters(['getParkingTotal'])
+    },
     mounted() {
+      this.parkParams.endVal = this.$store.state.ParkingTotal
+
+      console.log(this.getParkingTotal)
       this.mapChart= this.createPie();
       const _self=this;
       //var tmpCount=0;
@@ -61,7 +68,7 @@
        let tmpCount =Math.floor(Math.random()*3+1);;//1-3随机数
 //        _self.parkParams.startVal= _self.parkParams.endVal;
 //        _self.parkParams.endVal +=tmpCount;
-        console.log(tmpCount);
+        //console.log(tmpCount);
         _self.dayParams.startVal=_self.dayParams.endVal;
         _self.dayParams.endVal +=tmpCount;
       },10000);
@@ -22,6 +22,7 @@
 </template>
  
 <script>
+  import { mapActions } from 'vuex'
   import common from '../../api/common';
   import echarts from 'echarts'
     export default {
@@ -37,18 +38,24 @@
       },
       mounted() {
         //会员总数
-
         this.axios.post('urban/intelligence/appuser/queryUserPersonStatistic').then((response)=>{
           let  data = response.data.data
           this.registerNum = data.registerNum
           this.memberNumTotal = common.formatNumToStr(this.registerNum);
           this.activeUserNum = data.todayActiveNum
           this.newUerNum = data.todayRegisterNum
+          this.$store.dispatch('transferParkingTotal', data.registerNum)
+          //this.$store.dispatch('transferParkingTotal',10000);
+          //this.transferParkingTotal( data.registerNum);
+          console.log(this.$store.state.ParkingTotal)
         }).catch((response)=>{
           console.log(response);
         })
       },
       methods: {
+        ...mapActions([
+          'transferParkingTotal'
+        ])
         /*
          * 格式化会员总数
         //  * */
 import Vue from 'vue'
 import Vuex from 'vuex'
-import weather from './modules/weather'
-import weatherForecast from './modules/weatherForecast'
-//import createLogger from '../../../src/plugins/logger'
+
+import createLogger from 'vuex/dist/logger'
  
 Vue.use(Vuex)
  
-//const debug = process.env.NODE_ENV !== 'production'
+const state = {
+  ParkingTotal: 10000
+
+}
+
+const getters = {
+  getParkingTotal: function (state) {
+    return state.ParkingTotal
+  }
+}
+
+const mutations = {
+  changeParkingTotal(state,str){
+    state.ParkingTotal = str
+  }
+
+}
+
+const actions = {
+  transferParkingTotal(context,obj){
+    context.commit('changeParkingTotal',obj)
+  }
+}
+
+
+const debug = process.env.NODE_ENV !== 'production'
  
-export default new Vuex.Store({
-  modules: {
-    weatherModule:weather,
-    weatherForecastModule:weatherForecast
-  },
-  // strict: debug,
-  // plugins: debug ? [createLogger()] : []
+const store = new Vuex.Store({
+  state,
+  getters,
+  mutations,
+  actions,
+  plugins: debug ? [createLogger()] : []
 })
+export  default  store;