>[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 ~~~