Vue数据传输

页面渲染需要数据。这些数据或从服务器来，或从js来，但无论如何作为前端语言Vue需要一种有效的页面数据管理机制。

0. 理解Vue的方法组成

computed

computed是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。

watch

watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。

methods

我们可以使用 methods 属性给 Vue 定义方法

1. Vuex

Vuex是一种用于统筹管理Vue数据的容器，其实体就是项目中store文件夹下的index.js文件，在这里面记载了Vuex所能管理的大部分页面状态。index.js中的划分如下：

state

state承载了Vuex全部的状态信息。在注册了store实例后，利用$store.state可以在任意页面访问到这个状态树。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  }

getters

我们常常需要使用getters对state中的状态做一些重新计算的处理，就像computed()一样，只有在依赖值发生改变时才会重新计算。

 getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

mutations

• 修改state状态值的唯一方法是通过mutations中的方法。
• mutations中的方法都是同步的。

调用mutation

其中的方法非常类似于事件：有一个字符串的事件类型和一个回调函数。当需要调用其中的回调函数时，我们调用其方法名。

$store.commit('type')

传入参数

第一个参数默认是state，第二个参数是所有其他参数组成的对象，称为payload。

mutations:{
    increment(state, payload){
        state.count += payload.amount
    }
}

actions

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

调用action

$store.dispatch('incrementAsync', {
  amount: 10
})
//或
$store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：

modules

用于分割state。

2. localStorage

localStorage就是把数据存在本地，一般的浏览器支持5M的存储空间。

存储

localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)

取用

localStorage.getItem('accessToken')

删除

 localStorage.removeItem('accessToken')

更改

localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)