vueX原理与双向数据绑定

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

标签：count,Vuex,绑定,value,state,phoneNumber,双向,vueX,store
来源： https://www.cnblogs.com/shenbo666/p/14084377.html