温习vue

2017-12-25  本文已影响29人  Vijay_

脚手架

注入vuex

//yarn add vuex
import Vue from 'vue'
import App from './App'
import router from './router'
/*
1.将vuex的所有方法注入到每个子类
2.用store配置文件生成一个注册了get set监听的新实例
3.将生成的新实例放入Vue实例属性中
 */
import Vuex from 'vuex'
//引入store配置文件
import storeConfig from './store/index'
Vue.config.productionTip = false;
//注入到每个实例中,让每个实例都有访问Vuex方法的权限
Vue.use(Vuex);
//将store配置文件注册监听
const store = new Vuex.Store(storeConfig);

new Vue({
  el: '#app',
  router,
//将注册号监听后的store实例放到vue实例中,让每个vue实例都可以访问到store实例
  store,
  template: '<App/>',
  components: { App }
})

//storeConfig.js
import axios from 'axios';

export default {
  //设置子模块store 并配置每个模块的命名空间
  modules: {
    "index": {
      namespaced: true,
      state: {
        count: 0
      },
      //用于处理state,不能执行异步操作,在vue实例中用$store.commit(funcName,param)调用
      mutations: {
        increment(state, params) {
          console.log(params);
          state.count++
        }
      },
      actions: {
        //虽然mutaions不能异步处理，
        //但是可以用actions异步处理后调用传入的store实例的commit来调用mutations,
        //使用$store.dispatch(funcName,param)调用
        async addCount({rootState, state, commit}, params) {
          let res = null;
          try {
            res = await axios.get("xx/xx");
            commit("increment", res.data);
          } catch (error) {
            commit("increment", "error");
            console.log(error);
          }
        }
      },
      //类似computed
      //$store.getters.myCount返回的是一个函数->闭包引用了state
      //此时传递参数给返回的函数就可以获取一个处理过的state值
      getters: {
        myCount(state) {
          return num => state.count + num;
        }
      }
    }
  }
}




//App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <div class="test-bg">{{count}}</div>
    <div class="test-bg">{{oriCount}}</div>
  </div>
</template>

<script>
//  vuex提供了一些工具供使用
import {mapGetters,mapActions,mapState} from 'vuex'
export default {
  name: 'app',
  created(){
//    这两句作用相当
    this.$store.dispatch("index/addCount","test");
    this.pulCount("test");
  },
  methods:{
    ...mapActions("index",{
      pulCount:"addCount"
    })
  },
  computed:{
//    第一个参数是命名空间,第二个参数是注入了state的计算数学
    ...mapState("index",{
      oriCount:state=>state.count
    }),
    ...mapGetters("index",[
      "myCount"
    ]),
    count(){
      return this.myCount(2);
    }
  }
}
</script>

<style>
</style>

注入router

```javascript
router.beforeEach((to, from, next) => {
  document.title = to.meta.title||'龙城e驾';
  next()
});
```

- 路由使用


```javascript
//点击转跳路由
    <router-link :to="{path:'hello',query:{name:'vijay'}}">hello</router-link>
//获取路由路径参数
this.$router.currentRoute.query["name"]
//
```
- 嵌套路由

    //config
    import HelloWorld from '@/components/HelloWorld'
import asd from '@/components/asd'

export default {
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path: '/xx',
          component: asd,
        }
      ]
    },
    
  ]
}
//HelloWorld.vue
//在子控件中点击切换路由 也会显示到子控件的routerview上
  <router-link :to="{path:'/xx'}">asdasda</router-link>
    <router-view/>

//child.vue
created() {
       this.$emit("hello","test","test2");
       }
//parent.vuew
<router-view  @hello="listener" />
methods:{
   listener(p1,p2){
     console.log(p1,p2);
   }
 },

vue语法

```javascript
//父
//:name等于v-bind:name="xxx"
<asd-component :name="name"></asd-component>
//子
props: {
  name:{
     type: String,
     default:"默认值"
  }
},
```
上一篇 下一篇

猜你喜欢

热点阅读