09月01, 2020

VUE语法高亮及Vuex状态管理

由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools,无需配置即可进行时光旅行调试。

二十九、路由高亮效果

在首页中连接exact

<router-link :to="urlData.home" exact>首页</router-link>

style:

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

全局配置:

index.js路由中配置。
export default new Router({
  linkActiveClass:"active",

app.vue中:
.active{
    color: red;
}
</style>

可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

history配置

export default new Router({
  mode: "history",
  linkActiveClass:"active",

mode=history.back();

则不会记录历史,之返回上一次。

三十、VUEX

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单理解就是:共享数据。

之前的数据传递是:

子父级组件中、slot插槽中。

vuex用于没有关系的组件键传递参数。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

vuex状态管理

view -> (dispatch)Action ->(Commit)Mutations ->(Mutate)State ->View

注意:Action不是必需品,如果有一部操作才可能用到Action,否则可以不使用。

  1. 安装

    cnpm install vuex --save
  2. 导入

    import Vuex from 'vuex'
    
    Vue.use(Vuex)
  3. 注入Vue中

    // 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      }
    })
    
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

用法:

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。

在其他任何组件中就可以使用了。

   {{getInfo}}

   computed:{
           getInfo(){
               return this.$store.state.count;
           }
       }

共享state里面的数据,同时都可以修改,但是无论修改了,全部都会发生变化。

修改

通过 store.commit 方法触发状态变更

定义一个爱的函数方法,然后在组件中调用。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addhanshu (state) {
      state.count++
    }
  }
})
<button @click="add">事件中用vuex中定义的方法</button>

methods: {
        add() {
            this.$store.commit("addhanshu");
        }
    }
active:
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addhanshu (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('addhanshu')
    }
  }
})

调用action:

        add() {
            // this.$store.commit("addhanshu");
            this.$store.dispatch("increment");
        }
注意:

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

例如可以做延迟操作:

 actions: {
    increment (context) {
      setTimeout(() => {
        context.commit('addhanshu')
      }, 1000);
    }
  }

action:一般异步的。

gettes:
  getters:{
    myge (state) {
      return state.count > 10 ? 0 : state.count;
    }
  }

调用:

    computed:{
        getInfo(){
            // return this.$store.state.count;
            return this.$store.getters.myge;
        }
    },

vuex完整代码:

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.use(Vuex)

Vue.config.productionTip = false

// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addhanshu (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setTimeout(() => {
        context.commit('addhanshu')
      }, 1000);
    }
  },
  getters:{
    myge (state) {
      return state.count > 10 ? 0 : state.count;
    }
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
home.vue组件代码:
<template>
    <div>
        <list></list>
       {{getInfo}}
       <button @click="add">事件中用vuex中定义的方法</button>
    </div>
</template>

import List from './List'
export default {
    name: 'Home',
    data() {
        return {

        }
    },
    components: {
        List
    },
    computed:{
        getInfo(){
            // return this.$store.state.count;
            return this.$store.getters.myge;
        }
    },
    methods: {
        add() {
            // this.$store.commit("addhanshu");
            this.$store.dispatch("increment");
        }
    }
}

<style>

</style>

module:

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。module管理分割的模块。

使用不多。

提取store到单独的js中。

在src目录下新建store目录,里面新建index.js.

代码如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({        ---导出可以被使用
    state: {
      count: 0
    },
    mutations: {
      addhanshu (state) {
        state.count++
      }
    },
    actions: {
      increment (context) {
        setTimeout(() => {
          context.commit('addhanshu')
        }, 1000);
      }
    },
    getters:{
      myge (state) {
        return state.count > 10 ? 0 : state.count;
      }
    }
  })

main.js中代码如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'      ---引入roter
import store from './store/index'   ---引入store

Vue.config.productionTip = false

// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

本文链接:https://www.yanxizhu.com/post/VUE syntax highlighting and Vuex state management.html

-- EOF --

Comments