六 Vue学习 首页 （下）

一：Store介绍：
      state： 相当于数据
　　  action： action去commit mutations
　 　 mutation:   只有mutation 才能改变state
    例：

const store = new Vuex.Store({
    state: {
        count:0
    },
    mutations: {
        // 加1
        INCREMENT(state) {
            state.count++;
        },
        // 减1
        DECREMENT(state) {
            state.count--
        }
    },
    actions: {
        increment(context) {
            context.commit("INCREMENT");
        },
        decrement(context) {
            context.commit("DECREMENT");
        }
    }
})

2： Vuex 除了提供我们 Store 对象外，还对外提供了一系列的辅助函数，方便我们在代码中使用 Vuex，提供了操作 store 的各种属性的一系列语法糖:

　　...mapState(['adminInfo']): 将 store 中的 state 映射到局部计算属性中。其实就是保持局部变量和store中的同步。

　　...mapActions(['getAdminData']):将 store 中的 dispatch 方法映射到组件的 methods ，其实就是把store中的函数导进来，用来处理mapState过来的State。

3： watch : 对应一个对象，键是观察表达式，值是对应回调:
　　     观察adminInfo的值，如果发生变化，就执行newValue函数。

           watch: {
             adminInfo: function (newValue){
                if (newValue.id) {
                    this.$message({
                        type: 'success',
                       message: '检测到您之前登录过，将自动登录'
                    });
                     this.$router.push('manage')
               }
            }

4： this.$router.push('manage'):

      除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。router.push(location)

       想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

　　当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

　  　声明式：<router-link :to="...">
　   　编程式：router.push(...)

 

5： 综合上面知识， 分析如下代码片段：

         

       mounted(){           //  HTML加载完后，就会执行这段，取得管理员信息
            this.showLogin = true;
            if (!this.adminInfo.id) {
                 this.getAdminData()
            }

computed: { // 当adminInfo发生变化是，实时更新布局变量

       ...mapState(['adminInfo']), },   // 这里绑定布局变量和store中的adminInfo

  

 ...mapActions(['getAdminData']),     //  引入store中的getAdminData方法。供上面的this.getAdminData()调用。

watch: {                              // 每当adminInfo 变化，就执行function , 如果是已经登录的用户就调用this.$router.push('manage')

     adminInfo: function (newValue){
        if (newValue.id) {
           this.$message({
                       type: 'success',
                       message: '检测到您之前登录过，将自动登录'
                   });
           this.$router.push('manage')
        }
     }

 

 6： 最后介绍一下this.$refs
　　一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值;
　　

　　　　但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

　　　　然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了;

               例： 

<div id="app">
    <input type="text" ref="input1"/>       // 定义ref
    <button @click="add">添加</button>
</div>

<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>

 

转载于:https://www.cnblogs.com/liufei1983/p/8727917.html