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>