vue实时更新页面数据,vue实现局部刷新

问题：

起初用Vue.prototype.xxx 方式使用全局变量，但是当遇到页面之间跳出又跳转回来，全局变量存在不及时刷新问题！！！

解决：

采用vuex设置全局变量

新建store/index.js目录

index.js内容 

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { /** * 是否需要强制登录 */ forcedLogin: false, hasLogin: false, userName: "",totalPrice:0,tagList:[] }, mutations: {update(state,[key,value]){state[key]=value;}, }})export default store

main.js内容

import Vue from 'vue'import App from './App'import store from './store'Vue.config.productionTip = falseVue.prototype.$store = storeApp.mpType = 'app'const app = new Vue({ store, ...App})app.$mount()

vue页面中取值

computed:{getTotalPrice(){return this.$store.state.totalPrice},getTagList(){return this.$store.state.tagList}},

 

 

<input class="uni-input" name="totalPrice" type="number" disabled="disabled" v-model="getTotalPrice" />

vue页面中赋值

const _this = this;_this.$store.commit('update',['totalPrice',500]);