Problems in the use of weex vuex

using vuex, in weex will report that Cannot read property "dispatch" of undefined, the same code works well under web. Please tell me where you wrote it wrong

entrt.js

import Vue from "vue";
import weex from "weex-vue-render";
import Vuex from "vuex";

weex.init(Vue);
if (WXEnvironment.platform !== "Web") {
    Vue.use(Vuex);
}


store/countModule.js

import Vue from "vue";
import Vuex from "vuex"
if (WXEnvironment.platform !== "Web") {
Vue.use(Vuex);
}
const state = {
    count: 0
}
const mutations = {
    increment(state) {
        state.countPP
    },
    decrement(state) {
        state.count--
    }
}
const actions = {
    increment: ({ commit }) => commit("increment"),
    decrement: ({ commit }) => commit("decrement"),
   
}

export default {
    state,
    actions,
    mutations
}

store/store.js

import Vue from "vue";
import Vuex from "vuex";
import countModule from "./countModule";
if (WXEnvironment.platform !== "Web") {
Vue.use(Vuex);
}
export default new Vuex.Store({
    modules: {
        countModule
    }
})

index.vue

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready!</text>
    <HelloWorld/>
    <Display/>
    <Count/>
  </div>
</template>

<script>
import store from "./store/store";
import HelloWorld from "./components/HelloWorld.vue";
import Count from "./components/count.vue";
import Display from "./components/display.vue";

export default {
  name: "App",
  store,
  components: {
    HelloWorld,
    Count,
    Display
  },
  data () {
    return {
      logo: "https://img.codeshelper.com/upload/img/2021/03/01/1s3vs4dxst11443.png"
    }
  }
}
</script>

<style scoped>
  .wrapper {
    justify-content: center;
    align-items: center;
  }
  .logo {
    width: 424px;
    height: 200px;
  }
  .greeting {
    text-align: center;
    margin-top: 70px;
    font-size: 50px;
    color: -sharp41B883;
  }
  .message {
    margin: 30px;
    font-size: 32px;
    color: -sharp727272;
  }
</style>

count.vue

<template>
<div>
    <div class="btn" @click="increment()"><text class="btn-text">+1</text></div>
</div>
</template>
<style scoped>
.btn{
    background-color: -sharp2e3e4c;
    height: 50px;
    line-height: 50px;
    width:300px;
    margin:20px auto;
    
}
.btn-text{
    color: -sharpfff;
    text-align: center;
}
</style>
<script>
import { mapGetters, mapActions } from "vuex"
var modal = weex.requireModule("modal");
export default {
    methods:{
        increment(){
           // console.log(this.$store)
            this.$store.dispatch("increment"); 
        }
       
    },
    
}
</script>
Mar.01,2021

I have the same problem. The solution is as follows:

because the Vue.js framework code has been integrated into WeexSDK (above 0.9.5), you don't need to introduce Vue again. In addition, because Vuex will automatically register in the browser environment, you only need to register the Vuex plug-in in a non-Web environment. Repeated registration will throw a warning. The code to introduce Vuex is as follows:

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

// Vuex is auto installed on the web
if (WXEnvironment.platform !== 'Web') {
  Vue.use(Vuex)
}

after successful registration, all the features of Vuex can be used in Weex! The specific usage shall be based on the official documents.
reference:
https://codeshelper.com/a/11.

Menu