发表于 | 分类于

在ES5中声明变量只有var一种形式，是局部啊还是全局啊很麻烦去区别。ES6就将声明方式升级了那么一下子，全局用var，局部用let,常量用const

阅读全文 »

发表于 | 更新于 | 分类于

ES6有很多新特性简化了一些东西，但是因为还是有浏览器不兼容他，因此环境搭建就包括了将ES6转换成ES5以及简化转换命令

阅读全文 »

发表于 | 分类于

actions虽然功能上和mutations一样都是修改状态的，但mutations是同步的，actions是异步修改状态，那什么是异步，就好像你在网上购物付完款了你就什么不用管了，想做什么做什么，而你买的东西则会被卖家按部就班的操作最后运输到你面前，而同步就好像是你在商场买电器，必须等店员去仓库取货然后跟着你回家，你才能做其他事。在编程中，同步就是你必须执行完我这个步骤你才能往下走，就像mutations的操作，而actions是我调了之后会像是在另一个支路去完成我要的这个任务，而我本来的这个支路就可以接着往下走

1
import {mapState, mapMutations,mapActions} from 'vuex'
1
2
3
4
methods: {
           ...mapMutations(['add', 'reduce']),
           ...mapActions(['addAction','reduceAction'])
       },
1
2
<button @click="addAction">+</button>
       <button @click="reduceAction">-</button>
1
2
3
4
5
6
7
8
9
10
11
12
const actions = {
    addAction(context){
        context.commit('add',10);
        setTimeout(()=>{context.commit('reduce',1)},3000);
        console.log("我比reduce先执行");
    },
    reduceAction({commit}){
       commit('reduce',1)
    }
}
//context：上下文对象，这里你可以理解称store本身。
//{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

需要注意的是这里我们加了个验证异步，你可以看到就算没执行setTimeout，控制台还是马上输出了

发表于 | 分类于

getters实际上就是对数据进行的一种提前处理加工过滤，就像之前那加减按钮那个例子，我就可以用getters让她每次进行加减之前先加12

1
2
3
4
5
6
7
8
9
10
const getters = {
    count:function(state){
        return state.count+=12;
    }
}
export default new Vuex.Store({
    state,
    mutations,
    getters
})
1
import {mapState, mapMutations, mapGetters} from 'vuex'
1
2
3
4
5
computed: {
            ...mapState(['count']),
            ...mapGetters(['count'])

        },

注意这里用到的…是es6语法，为了避免前面的被后面的覆盖掉,而且我直接用的mapGetters这个简写方法了

发表于 | 分类于

首先说一下传值

1
2
3
4
5
6
7
8
const mutations = {
    add(state,num){
       state.count+=num
    },
    reduce(state,num){
       state.count-=num
    }
}
1
2
<button @click="$store.commit('add',2)">+</button>
<button @click="$store.commit('reduce',3)">-</button>

然后跟上篇一样在调用的时候写法太烦，类似的我们用mapMutations

1
2
 import {mapState,mapMutations} from'vuex'
methods:mapMutations(['add','reduce']),
1
2
<button @click="add(1)">+</button>
<button @click="reduce(1)">-</button>

发表于 | 分类于

在之前的小栗子里虽然已经可以实现功能，但是在接受数据时，那么一大长串很烦，下面就用三种方法可以直接写花括号就能访问，其中第三种是最常用的

第一种

1
2
3
4
5
6
computed:{
    //这是es6语法，就是个函数
             count(){
                 return this.$store.state.count
             }
      }

第二种

先引入mapState

1
2
import {mapState} from 'vuex'
//注意一定不能忘了花括号
1
2
3
4
5
//对象{}
computed:mapState({
    //es6中的箭头函数
            count:state=>state.count
         })

第三种,采用数组形式[]，同样也要先引入mapState

1
computed:mapState(['count'])

发表于 | 分类于

vuex是专门为vue服务的管理状态的一个东西，也可以说是管理data中需要共用的属性，下面这个小栗子就是个入门，里面的很多东西具体的意思会在后面补充，也许这个栗子做完之后会觉得比以前做的麻烦，但是我们主要是想用一个公共的思想他可以被任意一个component调用

怎么安装vuex就不说了，首先在src下建一个vuex文件夹，在它下面建一个store.js来做仓库，以后我们主要就在这个下面引入vuex的操作，剑豪之后首先引入vue和vuex

1
2
import Vue from 'vue';
import Vuex from 'vuex';

再加一行代码就可以使用vuex了

1
Vue.use(Vuex);

在仓库中放共用的数据，state也可以说是状态

1
2
3
const state = {
    count:1
}

加两个方法，这里就放在可修改的mutations里

1
2
3
4
5
6
7
8
const mutations = {
    add(state){
       state.count++
    },
    reduce(state){
       state.count--
    }
}

暴露出去

1
2
3
4
export default new Vuex.Store({
    state,
    mutations
})

要注意mutations是固定写法

下面就要在想应用vuex的组件里动手了

1
2
3
4
5
6
7
8
9
<div>
    <h2>{{message}}</h2>
    <hr />
    <p>{{$store.state.count}}</P>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit
    //注意必须写单引号才行
    ('reduce')">-</button>
</div>

注意调用的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
   import store from '@/vuex/store'
   //注意是写在暴露前面的
   export default{
       name:'Hi1',
       data(){
           return{
               message:'Hello Vuex!'
           }
        },
        store
        //在data后
   }
</script>

发表于 | 分类于

编程式导航就是取代router-link方法来写导航，他是运用javascript逻辑来写，这里常用的就是前进后退到某一页

1
2
3
<button @click="goForward">前进</button>
<button @click="goBack">后退</button>
<button @click="goHome">回首页</button>
1
2
3
4
5
6
7
8
9
10
11
12
methods:{
   goForward:function(){
     this.$router.go(1);
   },
    goBack:function(){
     this.$router.go(-1);
   },
   goHome:function(){
     this.$router.push('/');
     //注意这里是push不是go了，然后里面写什么路径就能跳到哪了
   }
 }

发表于 | 分类于

路由中的钩子函数我们一般只用两种，他们可以写在index.js中，也可写在模板，但是写在index.js中只能写beforeEnter不能写离开的钩子函数，而且在模板里能写两个都要在中间加一个Route,无论哪种书写方式，都要注意是使用三个参数的箭头函数，一定要写next(),它相当于一个开关，有了他才能接着跳转

阅读全文 »

发表于 | 分类于

首先此mode非彼mode，这里的mode 是指在用户浏览器你上url形式的,如果喜欢简洁的就用history,如果要有井号的就用hash全品个人喜好，那就在index.js下引入mode

1
mode:'history'//或hash
阅读全文 »