index.vue 文件
<template>
<div id="app">
<input type="text" v-model="this.$store.state.count" />
<!-- -->
<div>{{ count }}</div>
<!-- 双向绑定 -->
<input type="text" v-model="phoneNumber" />
<div>{{ this.$store.state.phoneNumber }}</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
mutationsdata: 5,
};
},
methods: {
getVal() {
this.$store.commit("increment", this.mutationsdata);
},
},
computed: {
phoneNumber: {
get() {
return this.$store.state.phoneNumber;
},
set(value) {
this.$store.commit("setPhoneNumber", value);
},
},
},
created() {
this.getVal();
},
};
</script>
<style>
.qwe-son {
padding: 5px 15px;
border: 1px solid red;
}
.on {
background: red;
color: #fff;
}
</style>
store/index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 5,
// a: '醉不成欢参将别',
// b: "别时茫茫江近月",
phoneNumber: '别时茫茫江近月',
},
getters: {
//修改属性
newCount: state => state.count * 3
},
mutations: {
increment(state, value) {
state.count += value;
},
setInput(state, newVal) {
state.inputVal = newVal
},
setPhoneNumber(state, val) {
state.phoneNumber = val
}
}
})
export default store //导出store