Nuxt全局变量,全局变量值的修改等,vuex的使用

1.Nuxt中其实是自带了vuex的,所以不需要你进行安装,在根目录的store文件夹中新建index.js


index.js

2.在store中新建modules文件夹,然后,创建一个base.js,这个命名是随意的,不需要一定是base,我在里面只是想存放一个屏幕大小的变量,所以取名为base.js


3.一般大型程序或者是你想规范的开发的话,这个index.js只是作为一个入口文件,只需要记录引用别的js文件中的内容即可,即使你做的是很小的项目,只是练手,我也觉得这样子做会更好。打开index.js,写入以下内容,相当于就是将base.js里面的内容引用到了index.js里面去

import Vuefrom 'vue';

import Vuexfrom 'vuex';

import base from './modules/base';    //引用base.js

Vue.use(Vuex);

const store = () =>new Vuex.Store({

modules: {

base                //base就是base.js

}

});

export default store

4.打开base.js,写入以下内容,关于vuex更详细的信息,请戳这里

const state = ({      //state里面存放的是变量,如果你要注册全局变量,写这里

    isPc:true,

     showImg:true

});

/*const getters = {                //getters相当于是state的计算属性,如果你需要将变量的值进行计算,然后输出,写这里

include: (state) => (val) => {

return state.list.indexOf(val) > -1;

}

}

;*/

const mutations = {       //修改store中的变量的方法,如果你要改变变量的值,就写这里

SET_isPc(state, value) {

state.isPc = value;

  },

  SET_showImg(state, value) {

state.showImg = value;

  }

};

/*const actions = {            //actions提交的是mutations,相当于就是改变变量的方法的重写,但是,actions是可以进行异步操作的

async setIsPc({state, commit}, val) {

commit('SET_isPc', val);

}

};*/

export default {

namespaced:true,            //命名空间

  state,            //这里你用到了哪几个属性就写哪几个,不需要的可以注释掉

  // getters,

// actions,

  mutations

};

5.在平常组件中的使用,首先引用你需要的变量或者是改变变量的方法或者是计算属性

import {mapState,mapMutations}from 'vuex'

//如果引用actions就是mapActions

//如果引用getters就是mapGetters

6.state和getters写computed计算属性里面

computed:{

...mapState('base', {

isPc: state => state.isPc,            //变量的名字

  })

},

7.mutations和actions写methods方法里面,base就是你引用的base.js

methods:{

...mapMutations('base', [

    'SET_isPc',            //mutations的名字

    'SET_showImg'        //mutations的名字

  ]),

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 4,003评论 0 3
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 7,985评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 12,438评论 4 111
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 8,295评论 0 6
  • 《生活比我的话更刻薄》 ——毒舌奶奶 第四天,P178——P200也,第四天 很有灵魂的文字,虽然我不是很记得看到...
    简小白mq阅读 936评论 0 1