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的名字

  ]),

}