ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
>[success] # Vuex 中的v-model写法 ~~~ 1.如何Vuex 中支持v-model 双向绑定 2.利用computed 计算属性做到 ~~~ >[danger] ##### store.vue 视图组件中的写法 ~~~ 1.用计算属性去监听值的变化,利用计算属性的set 去触发'mutations' ~~~ ~~~ <template> <div> <input v-model="appName"/> {{appName}} </div> </template> <script> import { mapGetters,mapState, mapMutations,mapActions} from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ ...mapMutations(['SET_APP_NAME']) }, computed:{ ...mapGetters(['appNameWithVersion']), appName:{ get(){ return this.$store.state.appName }, set(val){ this.SET_APP_NAME({'appName':val}) } } } } </script> <style scoped> </style> ~~~ >[danger] ##### mutations.js 中的写法 ~~~ import vue from 'vue' const mutations= { SET_APP_NAME(state,params){ console.log(params) state.appName = params.appName }, SET_Time(state,params){ vue.set(state,'timee','17:00') } }; export default mutations ~~~ >[danger] ##### 在state.js 中的写法 ~~~ const state= { appName:'admin', }; export default state ~~~