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 -->
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 -->
标签:帮助,return,函数,age,getters,state,duan,vux,store 来源: https://www.cnblogs.com/1609359841qq/p/12986689.html