Vue开发单页面应用中vue-router和vuex的使用

home页面有2个子路由list和user

<template>
  <div class="home">
    <router-view/>
    <router-link to="/home/list">新闻列表</router-link>
    <router-link to="/home/user">个人中心</router-link>
  </div>
</template>

路由处设置home的2个子路由

routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'list',
          name: 'list',
          component: () => import(/* webpackChunkName: "list" */ './views/List.vue')
        }, {
          path: 'user',
          name: 'user',
          component: () => import(/* webpackChunkName: "user" */ './views/User.vue')
        }
      ]
    }
  ]

当点击登录按钮后，会跳转到home下的list页面

<template>
  <div class="login">
    <button @click="reg">登录</button>
    <button>注册</button>
  </div>
</template>

<script>
export default {
  methods: {
    reg () {
      this.$router.push('/home/list')
    }
  }
}
</script>

Vuex应用

使用Add.vue组件添加的内容会在List.vue中显示，store.js中写入

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    lists: []
  },
  mutations: {
    addItem (state, value) {
      state.lists.push(value)
    }
  },
  actions: {}
})

当点击添加按钮时，触发定义在store.js中的addItem方法，这个方法需要一个value，使用对象提供，所以在Add.vue写入

<template>
  <div class="add">
    <p>标题</p><input type="text" v-model="title">
    <p>内容</p><input type="text" v-model="content">
    <div class="btn" @click="add">添加</div>
  </div>
</template>

<script>
import store from '@/store'

export default {
  store,
  data () {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    add () {
      store.commit('addItem', {
        title: this.title,
        content: this.content
      })
      this.$router.push('/home/list')
    }
  }

}
</script>

在List.vue中更新lists数据，需要监听lists的变化，所以要写在计算方法内

<template>
  <div class="list">
    <ul>
      <li v-for="(item,index) of lists" :key="index">{{item.title}}-{{item.content}}</li>
    </ul>
  </div>
</template>

<script>
import store from '@/store'

export default {
  store,
  computed: {
    lists () {
      return store.state.lists
    }
  }
}
</script>