console
//仓库
const store = new Vuex.Store({
state: {
count: 1
}
});
//foo组件
const foo = {
template: `
<div>
count: {{ count }}
countAlias: {{ countAlias }}
countPlusLocalCount: {{ countPlusLocalCount }}
<div>
`,
data() {
return {
localCount: 2
};
},
computed: Vuex.mapState({
//只处理仓库中的count
count: state => state.count*2,
//映射
countAlias: 'count',
//需要用到Vue实例的话不能使用箭头函数不然this无法获取到Vue实例
countPlusLocalCount(state) {
return state.count + this.localCount;
}
})
};
//App组件
const App = {
template: `
<div>
<foo></foo>
<div>
`,
components: {
foo
}
};
//挂载App
new Vue({
el: '#app',
store,
render: h => h(App)
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>