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的名字
]),
}
网友评论