vuex数据更新但是视图不会更新

1描述:vue2+vuex用的webpack打包

vuex通过mutations方式更改数据,数据确实更新了,但是页面并没有更新,通过排查发现是引用store方式的问题
以下是code:

//index.js
"use strict";
import Vue from 'Vue'; 
import Vuex from 'vuex';
import store from '../../vuex/store.js';
import VueRouter from 'vue-router';
import routers from '../../routers/routers';
Vue.use(Vuex);
Vue.use(VueRouter);

Vue.config.debug = true;//开启错误提示

const router = new VueRouter({
    //mode: 'history',
    //scrollBehavior: () => ({ y: 0 }),
    routes: routers
})


//vuex
//const store = new Vuex.Store({
//    state: {
//        count: 0
//    },
//    mutations: {
//        increment: state => state.count++,
//        decrement: state => state.count--
//    }
//})

const app = new Vue({
    router,
    store,
    computed: {
        indexData () {
            return this.$store.state.count
        }
    },
    methods: {
        increment () {
            this.$store.commit('increment')
        },
        decrement () {
            this.$store.commit('decrement')
        }
    },
    mounted: function () {
    },
}).$mount('#app')
//index.html
 <div id="app">
        <h1>Hello App!</h1>
        <p>
            <div>vuex data: {{ indexData }}</div>
            <div><a href="javascript:;" @click="increment">IncrementCount</a></div>
            <div><a href="javascript:;" @click="decrement">DecrementCount</a></div>
        </p>
    </div>
//store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state ={
    count: 0
}
const mutations ={
    increment: state => state.count++,
    decrement: state => state.count--
}

export default new Vuex.Store({
    state,
    mutations
})

以上是主要的代码
在index.js中使用import的方式引入store就会出现描述的问题
如果直接在index.js中直接定义store(注释部分)就不会出现上述问题

阅读 9.4k
2 个回答

store里面vue小写了。。。蠢比问题

我靠,我也是这个问题,V大写了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题