The first step: index.js entry file in store folder write:
import Vue from 'vue';
import Vuex from 'vuex';
import feeds from './feeds/index'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
feeds
}
})
Step Two: index file in each module which all the parts assembled, and outputs
default {Export
namespaced: to true, otherwise it must be added // given
State: {
Number:. 1
},
mutations: {
the Add (State, playload) {
state.number playload + =;
}
},
Actions: {
the addAction (context) {
context.commit ( 'the Add', 10);
}
}
}
Note that the above and more out of line, how do we distinguish between the different modules in the components in it? namespaced written true, meaning that this module can be used as distinguished name (i.e. where the module file folder name)
is preferably used to store into main.js code is as follows:
Vue from Import 'VUE'
Import from the App './App.vue'
Import from Router './router'
Import from Store './store/index'
Vue.config.productionTip to false =
new new Vue ({
Router,
Store,
the render : = H> H (the App)
.}) $ Mount ( '# App')
so that can be used in moudules state, mutations, actions, code is as follows:
{mapState Import, mapActions, mapMutations} from 'vuex'
Export default {
name: 'Home',
computed: {
... mapState ( 'feeds', {
Number: State => state.number
})
},
Methods: {/ / module name must be written clearly
... mapActions ( 'feeds', [//
'the addAction'
]),
... mapMutations ( 'feeds', [
'the Add',
]),
}
}
HTML code is as follows:
<Template>
<div class = "Home">
{{the this. store.state.feeds.number $}}
a
{{Number}}
method of mutations // Call
<button @ click = "add ( 1) "> added </ Button>
a
a // call the actions of the method invocation
<button @click="addAction">action加</button>
</div>
</template>
In addition, we can also get state variables and methods specific mutations and actions by the modules in this $ store.
Code as follows:
<template>
<div class="about">
<h1></h1>
{{this.$store.state.feeds.number}}
<br>
<!--调用mutations的方法-->
<button @click="add">mutations加</button>
<br>
<br> <!--调用actions的方法-->
<button @click="addaction">actions加</button>
</div>
</template>
<script>
import { mapState,mapActions,mapMutations } from 'vuex'
export default {
name: 'home',
methods: {
add() {
this.$store.commit('feeds/add',10)
},
addaction() {
this.$store.dispatch('feeds/addAction') ;
}
}
}
</script>