index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0,
msg: 'hello world',
num: 11,
val: 12
},
mutations: {
addNum(state) {
state.count++
},
setNum(state, val) {
state.num = val
}
},
actions: {
},
modules: {
},
getters: {
reverseMsg: function (state) {
return state.msg.split('').reverse().join('')
},
mixinMsg: function (state) {
return function (val) {
return state.msg + val
}
}
}
})
get.vue
<template>
<div>
<h1>
{{$store.getters.reverseMsg}}
</h1>
<h2>{{}}</h2>
<h2>{{msg}}</h2>
<h2>{{num}}</h2>
<h2>{{mixinMsg1}}</h2>
</div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
let mapGetData = mapGetters(['reverseMsg', 'mixinMsg'])
let mapStateData = mapState(['msg', 'num', 'val'])
export default {
name: "get",
computed: {
mixinMsg1: function () {
return this.$store.getters.mixinMsg('123456')
},
...mapStateData,
...mapGetData
},
mounted() {
console.log(this)
}
}
</script>
<style scoped>
</style>