vue 路由和状态管理

vue路由

• 重新安装vue项目

vue create demox
Manually select features

• 认识路由（Vue Router）

• Vue-Router

App.vue
<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/user">User</router-link> |

    <router-link to="/page" custom v-slot="{ navigate }">
      <button @click="navigate" @keypress.enter="navigate" role="link">page</button>
    </router-link>
    |
    <button @click="$router.go(-1)">返回</button>
    |
    {{$route.path}}
<br>
    <a :class="{active:$route.path='/msg'}" href="/msg"> Msg</a>
    <button @click="$router.push('/page')">all</button>
    <button @click="topage('user')">user</button>
  </div>
  <router-view/>
</template>
<script>
export default {
  name:'App',
  data(){
    return{
      msg:'aaa'
    }
  },
  methods:{
    one(){
      console.log(this.msg);
      // this.$route.path;
      // this.$router.
    },
    topage(path){
      this.$router.push(path)
    }
  }
}
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }

  }
  a.active{
    color: brown;
  }
}

</style>

Page.vue
<template>
<div>

  文章ID:{{$route.params.id}}
</div>
</template>

<script>
export default {
  name: "Page",
  methods:{
    one(){
      console.log(this.$route.params.id);
    }
  }
}
</script>

<style scoped>

</style>

User.vue
<template>
<div>
  <h1>会员中心</h1>
  <div class="menu">
    <li><router-link to="/user/setting">Setting</router-link></li>
    <li><router-link to="/user/info">Info</router-link></li>
    <li>
      <button @click="topage">数据</button>
    </li>
  </div>
  <div class="main">
    <router-view/>
  </div>
</div>
</template>

<script>
export default {
  name: "User",
  methods:{
    topage(){
      this.$router.push({path:'/user/info', query: {name:'zhangsan',age:30}})
    }
  }
}
</script>

<style scoped lang="scss">
.menu{
  width: 30%;
  float: left;
  height: 300px;
  background: #42b983;

a {
  font-weight: bold;
  color: #2c3e50;

&.router-link-exact-active {
   color: red;
 }

}
}
.main{
  width: 65%;
  height: 300px;
  float: right;
  background: antiquewhite;
}

</style>

Info.vue
<template>
<div>
  个人信息
  <h3>
    {{$route.query.name}}<br>
    {{$route.query.age}}
  </h3>
</div>
</template>

<script>
export default {
  name: "Info"
}
</script>

<style scoped>

</style>

router/index.js
// import { createRouter, createWebHistory } from 'vue-router'
// import Home from '../views/Home.vue'
// import Page from '../views/Page.vue'
// import User from '../views/User.vue'
import { createRouter, createWebHistory } from 'vue-router'
const Home = () => import( '../views/Home.vue')
const About = () => import( '../views/About.vue')
const Page = () => import( '../views/Page.vue')
const User = () => import( '../views/User.vue')
const Msg = () => import( '../views/Msg.vue')
const Setting = () => import( '../views/Setting.vue')
const Info = () => import( '../views/Info.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component:About
  },
  {
    path: '/page/:id',
    name: 'Page',
    component:Page,

  },
  {
    path: '/user',
    name: 'User',
    component:User,
    //子路由
    children:[
      {
        path: 'setting',
        name: 'Setting',
        component:Setting
      },
      {
        path: 'info',
        name: 'Info',
        component:Info
      }

    ]
  },
  {
    path: '/msg',
    name: 'Msg',
    component:Msg
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
router.beforeEach((to, from )=>{
  document.title = to.meta.title;
})
router.afterEach((to, from)=>{
  console.log("to---"+to.fullPath);
  console.log("from---"+from.fullPath);
})
export default router

• Vuex 状态管理

使用APP全局属性: $store 中的 state

<h3>单组件中应用</h3>
    <h2>{{count}}</h2>
    <button @click="count--">--</button>
    <button @click="count++">++</button>

    <h3>使用vuex中的状态</h3>
    <h2>{{$store.state.num}}</h2>
    <button @click="$store.state.num-=2">-2</button>
    <button @click="$store.state.num+=2">+2</button>

通过Mutations修改

state: {
    num:10,
    dnum:9
  },
  mutations: {
    sub(state,xnum){
      state.dnum -=xnum;
    },
    add(state,xnum){
      state.dnum +=xnum;
    }
  },

 methods:{
    sub11(xnum){
      this.$store.commit('sub',xnum);
    },
    add11(xnum){
      this.$store.commit('add',xnum);
    }
  }
<h3>通过mutations 修改数据</h3>
    <h2>{{$store.state.dnum}}</h2>
    <button @click="sub11(5)">-</button>
    <button @click="add11(5)">+</button>

计算属性getter应用

getters:{
    vxdnumpod(state){
      return state.dnum*state.dnum;
    }
  },

  <h2>{{$store.getters.vxdnumpod}}</h2>
    <button @click="sub11(5)">-</button>
    <button @click="add11(5)">+</button>

Actions异步处理操作

asetnum(state){
      state.dnum=12345
    }

 setnum({state, commit, getters}){
      // setnum(context){
      // const {state, commit, getters}=context
      setTimeout(()=>{
        commit('asetnum');
      },3000)
    }

setdnum(){
      this.$store.dispatch('setnum')
    }
{{setdnum()}}
    <h2>{{$store.state.dnum}}</h2>