module / user.js Code
```
Import view from 'View'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
liu: 'jingna',
wei: [ 'yu', 'ning']
}
const mutations = {
changeName(state,res){
state.liu = res
}
}
const actions = {
changeNameA(context){
context.commit ( 'changeName', 'Nanjing')
}
}
export default {
state,mutations,actions
}
```
index.js Code
```
```
Import view from 'View'
import Vuex from 'vuex'
import user from "./module/user"
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
user,
},
state: {
count:7777
},
mutations: {
change(state, value){
// eslint-disable-next-line no-console
console.log(value)
// eslint-disable-next-line no-undef
state.count=value
},
},
actions: {
changevalue(context,params){
context.commit("change",params.count)
}
}
})
vue components used
``
`<template>
<div class="about">
<p>{{count}}</p>
<p>{{username}}</p>
<button @click="add">点击</button>
<button @click="namec">改名字</button>
<headertop></headertop>
</div>
</template>
<script>
import headertop from "@/components/header";
import { mapActions, mapState } from "vuex";
export default {
name: "about",
data() {
return {};
},
computed: {
count: {
get() {
return this.$store.state.count;
}
},
username: {
get() {
return this.$store.state.user.liu;
}
}
},
components: {
headertop
},
methods: {
add() {
this.$store.dispatch("changevalue", { count: 25 });
},
namec() {
this.$store.commit("changeName", "深圳");
}
}
};
</script>
```
Reproduced in: https: //www.jianshu.com/p/5903765d3bb3