vux使用和帮助函数
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 –>
版权声明：本文为1609359841qq原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。