软件开发架构师

六 Vue学习 首页 (下)

前端 111 2019-03-22 23:10
一: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>

 

 
文章评论