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