Vue.js 学习笔记（二）

4. Vuex 状态管理

Vuex 简介

Vuex 是 Vue.js 的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

核心概念

State

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduction(state) {
      state.count--;
    }
  },
  actions: {},
  modules: {}
});

Getters

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduction(state) {
      state.count--;
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  actions: {},
  modules: {}
});

Mutations

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduction(state) {
      state.count--;
    }
  },
  actions: {},
  modules: {}
});

Actions

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduction(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  modules: {}
});

Modules

// store/modules/moduleA.js
const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    incrementA(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsyncA({ commit }) {
      setTimeout(() => {
        commit('incrementA');
      }, 1000);
    }
  }
};

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from './modules/moduleA';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    a: moduleA
  }
});

实战

<template>
  <div id="app">
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="reduction">减少</button>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex';

  export default {
    computed: mapState({
      count: state => state.count
    }),
    methods: mapMutations([
      'increment',
      'reduction'
    ])
  };
</script>

5. Vue Router 路由管理

Vue Router 简介

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成，使得构建单页面应用变得易如反掌。

核心概念

路由配置

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

动态路由

// router/index.js
export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
});

嵌套路由

// router/index.js
import Home from '@/components/Home.vue';
import User from '@/components/User.vue';
import UserProfile from '@/components/UserProfile.vue';

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/user/:id',
      name: 'User',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        }
      ]
    }
  ]
});

导航守卫

// router/index.js
router.beforeEach((to, from, next) => {
  if (to.name === 'User') {
    console.log('正在访问用户页面');
  }
  next();
});

实战

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>