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(注释部分)就不会出现上述问题
store里面vue小写了。。。蠢比问题