学习记录—Vue

关于Vue中的混入mixin（混入对象）
用于分发Vue中组件中的公用的逻辑功能
官网：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

混入时会以组件自身的钩子函数优先。

关于vuex
Vue中的状态管理，这个状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化。
状态的辅助函数：
在子组件中：

computed:(
	...mapState({
		message: state => console.log(state)
	})
)

mutation是更改store中的状态的唯一方法。

const store = createStore({
  state: {
    stateCount: null
  },
  mutations: {
    increment (state,payload) {
      // 变更状态
      state.stateCount = payload.count
    }
  }
})
//mutation中的函数都必须是通过在组件中做以下的注册：
// 一般的所提交的负载payload是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
this.$store.commit('increment',{count:1})

active提交的是mutation,而不是直接变更状态，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象。

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state,payload) {
      state.count = payload.count++
    }
  },
  actions: {
    increment ({commit}) {
      commit('increment')
    }
  }
})

在组件中可以通过dispatch()来分发：

this.$store.dispatch('increment',{count:1})

关于VueRouter
使用router-link标签进行路由导航（创建链接），使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
使用router-view 标签将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>