标签：count Vuex 绑定 value state phoneNumber 双向 vueX store

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。