计算属性

例子：

注意：调用计算属性时，不可以带括号，那样调用的就是方法，如：以下调用fullName时不可funnName()

		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>  //在调用fullName就是从内存里面取了
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>

		data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			}

		computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}

简写：

vueX的使用

vue默认vue3版本，vuex默认vuex4版本，vuex4只能在vue3中使用，在vue2中能使用vuex3,那么不能默认下载最新的版本
如果你出现了版本的问题只需要 npm install vuex@3 --save 重新安装对应版本就好的

1创建src/store/index.vue

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    updateToken (state, newToken) {
      state.token = newToken
    }
  }
})
export default store

2.在main.js中

import store from '@/store'
new Vue({
  router,
  store,  //<<<<<<--------这里
  render: h => h(App)
}).$mount('#app')