vue2.x 随记

1. 外部js调用vue的方法等

将vue实例中的this传入外部js文件（比如作为某方法的参数），即可访问传入实例的所有内容。调用该实例中子组件的方法，用$refs。

2. 路由参数

传递：vm.$router.push({ name: '', params: { id: 1 } }); // 注意，用path属性，在目标路由中取不到参数值

获取：vm.$route.params.id;

3.@click

绑定类似于

<label>
   <input
         type="radio"
         name="patient-radio"
         :value="item.patientID"
         v-model="follow.selected"
         @click="selectPatient"
   /> {{ item.realName }}
</label>

要绑定在input上，不要绑在label上，否则会出现事件冒泡。

4. vuex(状态管理)的使用

• 访问store，可以事先在router.js中将store注册到根实例中，然后可以在各个组件通过this.$router访问到。

const app = new Vue({
    store,
    router,
    render: h => h(index)
}).$mount('#app')

某组件中打印store中的信息：

mounted() {
     console.log(this.$store.state); // 打印结果: Object {__ob__: Observer}
}

• Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。Getters 接受 state 作为其第一个参数；也可以接受其他 getters 作为第二个参数。
  
  在模块化的状态管理中，模块可以这样export：
  
  state.js

export const commonState = {
    count: 0,
    todos: [
        { id: 1, text: '第一', done: true },
        { id: 2, text: '第二', done: false },
        { id: 3, text: '第三', done: true }
    ]
}

getters.js:

export const commonGetters = {
    doneTodos(state) {
        return state.todos.filter(todo => todo.done)
    },
    doneTodosCount(state, getters) {
        return getters.doneTodos.length
    }
}

然后在index.js(store)中这样注册：

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import * as state from './state'
Vue.use(Vuex)
export default new Vuex.Store({
    state: state.commonState,
    actions: state.commonActions,
    getters: getters.commonGetters
})

在组件中，就可以通过this.$store直接调用它们：

console.log(this.$store.getters.doneTodosCount); // 结果为：2

当然也可以使用mapGetters 辅助函数，将 store 中的 state/getters 映射到局部计算属性：

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
export default {
computed: {
    ...mapState({
         // 当映射的计算属性的名称与 state 的子节点名称相同时，
         // 我们也可以给 mapState 传一个字符串数组。
         // mapState(['count'])
         count: state => state.count,

         // 为了能够使用this获取局部状态，必须使用常规函数
         countPlusLocalState(state) {
               return state.count + this.localCount
         }
    }),
    ...mapGetters([
       'doneTodos',
       'doneTodosCount'
    ]),
    ...mapGetters({
        // 命名
        doneCount: 'doneTodosCount'
   })
},
mounted() {
    // 通过vm.$store访问
    console.log(this.$store.state.count) // 打印结果: 0
    // 通过映射到当前实例计算属性访问
    console.log(this.count); // 打印结果: 0

    console.log(this.$store.getters.doneTodosCount) // 打印结果: 2
    console.log(this.doneCount); // 打印结果: 2
}
}

• Mutations
  
  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 必须同步执行。回调函数 (handler)接受 state 作为第一个参数；store.commit提交，你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）,载荷应该是一个对象:store.commit('increment', { amount: 10 })。
  
  提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
    type: 'increment',
    amount: 10
})

handler:

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

在组件中提交 Mutations:

methods: {
      // 状态管理 conmmit
      ...mapMutations({
          // 映射 this.add() 为 this.$store.commit('increment')
          add: 'increment'
      })
},
mounted() {
      let obj = {};
      obj.amount = 1;
      // 调用
      this.add(obj);
      console.log(this.count); // 打印结果为1
}

• Actions
  
  Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作，也就是说 action 内部可以执行异步操作。触发Actions：store.dispatch()；Actions 支持同样的载荷方式和对象方式。

5. 关于watch的使用

监听一个普通的变量简单，关于监听一个对象：

data() {
    return {
          modal: {
              accept: []
          }
     }
},
watch: {
     modal: {
         handler(curVal, oldVal) {
              if(curVal.accept.length <= 0)
                    this.modal.btnRDis = true;
               else
                    this.modal.btnRDis = false;
　　　   },
　　　   deep:true
      }
},