码迷,mamicode.com
首页 > Web开发 > 详细

nuxtjs中修改head及vuex的使用

时间:2018-11-16 00:23:33      阅读:465      评论:0      收藏:0      [点我收藏+]

标签:dex   npm   method   img   ++   new   import   分享   test   

1.在之前vue项目中,我们如果需要改变每个页面的title,是需要在路由里配置meta然后通过路由守卫将每个页面的title替换掉,但是在nuxtjs中他提供了一个方法,直接在每个.vue的文件中使用这个head方法即可修改每个页面的title

head(){
        return {
            title:‘form表单‘
        }
},

技术分享图片

2.在nuxtjs中使用vuex,和在vue中使用它是一样的,先 npm install vuex 然后再store下简历index.js

import Vuex from ‘vuex‘

import mutations from ‘./mutations‘

const createStore = () => {
  return new Vuex.Store({
    state: {
      counter: 0
    },
    mutations
  })
}

export default createStore
mutations.js如下:
const mutations = {
    increment(state) {
      state.counter++
    }
  }
  
  export default mutations
  

然后在.vue页面中直接获取或者调用

computed: mapState([
        ‘counter‘
    ]),
    methods:{
         increment() {
            this.$store.commit(‘increment‘)
        }
    }
通过computed中使用mapState获取state中的counter,然后和在vue中一样通过this.$store来改变state中的值

 

nuxtjs中修改head及vuex的使用

标签:dex   npm   method   img   ++   new   import   分享   test   

原文地址:https://www.cnblogs.com/ldlx-mars/p/9966859.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!