一)创建交store的目录在下面创建一个js文件(然后书写下面代码);
//1、导入相关库
import Vue from 'vue';
import Vuex from 'vuex';
//导入那些已经写好的模块:(后面代码会讲解下面这行代码)
import test from './modules/test.js'
//2、安装vuex插件
Vue.use(Vuex);
//3、创建store实例
const store = new Vuex.Store({
modules:{
test//是已经写好的模块(后续讲解)
}
});
export default store;
二)在main.js中进行挂载
//1、导入刚刚写的store文件夹
import store from './store';
//2、在app处进行挂载
const app = new Vue({
...App,
//挂载实例
store
})
三)此时创建自己的模块:
在store文件夹下创建一个modules文件夹里面存放模块。
export default {
//1、必须先指定命名空间:
namespaced:true,
//2、通过state来声明变量数据:
state:()=>{
return{
msg:'我成功了'
}
},
//3、创建方法,用于修改state中的数据(state中的数据只能通过下面方法中的函数进行修改)
mutations: {
//所有mutations里面定义的方法第一个参数都必须是state,并且传参的时候不用传
//state就是上面定义的state,访问里面的数据可以state.msg即可
//在传参的时候只需要穿value即可,state可以不用传递
testMethod(state, value) {
//在模块中调用模块的方法,必须使用this.commit方法,第一个参数是'模块名/方法名',第二个参数若有参数就传参
this.commit('test/change',value)//调用下面的change,直接写change(value)不能调用
}
change(state,val){
if(val==1)
state.msg = '我变了'
}
}
}
四)最后到使用页面进行注册
//导入vuex中全局状态管理相关函数(固定代码):
//1、mapState用于访问变量的,mapMutations用于访问模块中的函数
import{mapState,mapMutations} from 'vuex'
export default {
methods: {
//导入全局状态管理里的函数
//参数1是模块名称,参数二是要导入里面的方法,今后只用就和已经定义好的方法使用一样
...mapMutations('test',['testMethod'])
//测试使用
testss(){
this.testMethod(1)
}
},
//导入全局状态管理里的方法
computed:{
//在computed中通过mapState函数,注册state中的数据,导入之后可以像data中的一样直接使用
//参数一是模块名称,第二个是一个要导入数据的数组
...mapState('test',['msg'])
}
};
之后就可以像data中的数据一样使用了。
<view>{{msg}}<view>