本人weex小白,最近由于需求要往weexpack中加入vuex,从GitHub上找到这方面的文章
(此为文章链接:https://github.com/weexteam/a...)
我根据文章里的要求引用了以上两个插件,但就是无法达到预期的效果,以下为代码:
webpack.config.js中的代码:
loaders: [
{
test: /\.we(\?[^?]+)?$/,
loaders: ['weex-loader', 'weex-vuex-loader?store']
},
store.ja中的代码:
var Vuex = require('vuex-weex');
Vue.use(Vuex);
var state = {
count: 10
};
var mutations = {
inc: function(state) {
state.count++;
}
};
var getters = {
wrappedCount: function(store) {
return store.state.count + '次';
}
};
module.exports = new Vuex.Store({
state: state,
mutations: mutations,
getters: getters
});
index.we中的代码:
<template>
<div class="test">
<text>{{count}}</text>
<div onclick="inc">递增</div>
</div>
</template>
<script>
module.exports = {
data:{
count:0
},
computed: {
count: function() {
return this._store.state.count;
}
},
methods: {
inc: function() {
this._store.commit('inc');
}
},
created:function () {
console.log('我是store:!!!!! ',this._store);
}
}
</script>
<style>
.test{
display: flex;
flex:1;
background-color: aqua;
}
</style>
运行控制台截图:
单独require引入store.js文件实验成功,但无法做到全局引入。
望大佬感慨解答,小弟在此谢过。
如果想在你的weex项目中引入比如
vuex
或vue-router
之类的周边库,建议你的weex项目使用Vue去开发。单独引入可以成功是因为引入的文件只在你当前的js文件中生效,而你编译的后的项目,我猜测是多页面的,也就是说,编译出了多个
js
文件,而vuex
只是在单页面中操作的,所以建议你去使用Vue
去开发,或者使用单页面开发时在使用vuex
。如果你一定要使用多页面,并且使用vuex
,那么需要你自己实现一下关于页面间的数据同步问题。