store index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
duan:"192",
age:"15"
},
mutations: {
edit(state,payload){
state.duan = payload
}
},
getters:{
nameInfo(state){
return "姓名:"+state.age
},
fullInfo(state,getters){
return "姓名"+ getters.nameInfo +'年龄:'+state.age
} ,
namepac(state,getters){
return state.age+getters.nameInfo+getters.fullInfo+getters.fullInfo
}
},
actions: {
aEdit(context,k){
setTimeout(()=>{
context.commit('edit',k)
},2000)
}
},
modules: {
},
strict:true
})
-----------------------------------------
组件中使用
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div>{{this.$store.state.duan}}</div>
---<p>{{duan}}</p>---
<p>{{localState}}</p>
<p @click="aa({age:18})">{{countss}}</p>
<p>{{this.$store.getters.fullInfo}} </p>
--
<p> {{this.$store.getters.namepac}}</p>
=-
<p>{{namepac}}</p>
</div>
</template>
<script>
import {mapState,mapGetters,mapActions} from "vuex"
import store from "../store/index";
export default {
name: "HelloWorld",
props: {
msg: String
},
created () {
setTimeout(()=>{
this.$store.commit("edit",{age:15,sex:'男'});
},5000)
},
data() {
return {
localState: 123
};
},
methods: {
aa() {
this.$store.commit("edit",25);
this.$store.dispatch('aEdit',{age:18})
}
},
computed: {
...mapState(["duan"]
),
...mapActions(['aEdit']),
...mapGetters(["namepac"]),
// count() {
// return store.state.data;
// },
countss() {
return store.state.duan * this.localState + this.msg;
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->