vue引入全局js,给vue定义全局的方法
本文主要介绍了在Vue中添加全局存储的方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
Vue添加全球商店。在命令行上输入安装在main.js文件中的引用。在src中创建一个页面文件，在src下创建一个存储文件。解释如何使用商店。vuex包含五个基本对象，vuex，模块间的方法调用store的action方法。
Vue添加全局store
在命令行中输入安装
npm安装-保存vuex
在main.js文件中引用
并声明存储在新Vue中。
从导入存储。/商店
店，
在src中创建一个page文件
在页面文件下创建该模块的js文件(内容如下)
常量状态={
家庭状态：{
LoginStatus:false
},
用户：[]，
}
常量突变={
[setuseinfo](状态，数据){
},
}
常量操作={
}
在src下创建一个store文件
在存储文件下创建一个索引js文件
从“vue”导入Vue
从“vuex”导入Vuex
从以下位置导入页面./页面/模块
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{}，
模块：{
页，面，张，版
}
})
store使用方法讲解
vuex 包含有五个基本的对象
状态：存储状态。也就是变量；吸气剂：派生状态。也就是说，进入集合并得到。有两个可选参数：state和getters可以分别在state和other getters中获取变量。外部调用方法：store.getters.personInfo()。就像vue的计算一样；突变：提交状态修改.即set in set and get。这是在vuex中修改状态的唯一方法，但是不支持异步操作。默认情况下，第一个参数是state。外部调用方法：store.commit(set _ age ，18)。和vue里的方法差不多。动作：类似于突变。但是，actions支持异步操作。默认情况下，第一个参数是与store具有相同参数属性的对象。外部调用方法：store.dispatch(nameAsyn )。这个。$ store.dispatch(用户/登录，这个。LoginForm)模块：商店的一个子模块，内容相当于商店的一个实例。调用的方法和前面描述的类似，只是增加了当前子模块名，比如：store.a.getters.xxx()。
从“vue”导入Vue
从“vuex”导入Vuex
从导入状态。/state.js
从导入getters。/getters
从导入突变。/mutations.js
从导入操作。/actions.js
//安装Vue Devtools调试工具https://blog.csdn.net/li22356/article/details/113092495.
//mount Vuex，帮助手册https://www.jianshu.com/p/2e5973fe1223
//模块化请参考https://www.jb51.net/article/150752.htm。
vue . use(Vuex)；
//创建一个VueX对象，使用H1 { { $ store . state . name } }/h1 console . log(this。$ store.state.name)
//添加状态对象Vue.set(state， age ，15)和删除Vue.delete(state， age )
const store=new Vuex。商店({
//存储数据，存储状态
//使用方法
状态，
//对外处理状态成员
//声明当前VueX对象中的状态对象
//getters当前getters对象用于使用getters下的其他getters。
//组件使用此。$store.getters.fullInfo
吸气剂，
//状态成员操作，操作状态数据的方法集合，如修改、添加、删除等。
//组件调用this.store.commit (set _ token ， newtoken) mount方法。
//同步处理
突变，
//异步处理
//用这个。组件中的store . dispatch(“a edit”、“new token”)
行动
});
导出默认值()={
退货商店
}
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({
//将全局参数放在这里，如用户登录信息
状态：{
token:“hello vuex”，
名称： ，
年龄：“”
},
突变：{
//这里是设置的方法，比如这个数据的修改，添加，删除等等。
//组件调用this.store.commit (set _ token ， newtoken) mount方法。
SET_TOKEN: (state，token)={
state.token=令牌
控制台. log(state . token)；
}
},
//getters当前吸气剂对象（可对对象进行二次更改),用于将吸气剂下的其他吸气剂拿来用，组件通过这个store.getters.fullInfo拿来使用
getters: {
令牌：state=state.token
名称信息(州){
返回姓名： state.name
},
fullInfo(state，getters) {
返回 getters.nameInfo 年龄： state.age
}
},
//异步处理
//组件中使用这个store.dispatch(aEdit ，新令牌)
动作：{
QQlogin({commit}，token) {
返回新承诺((解决，拒绝)={
塞托肯(令牌);//把代币存放到甜饼干里
提交( SET_TOKEN ，TOKEN)//提交调用突变数据
解决()
})
},
aEdit(上下文，有效负载){
返回新承诺((解决，拒绝)={
setTimeout(()={
context.commit(SET_TOKEN ，有效负载)
解决()
}, 2000)
})
}
},
模块：{
//这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他商店文件，然后引入这里
}
})
vuex，module间的方法调用
我们用状态管理时通常会分功能创建多的模块，单个组件里的操作大家应该很清楚，那多个组件之间怎么调用了？
详细代码：
现在我有两个模块：用户和菜单，要在用户中调用菜单的行动方法，操作如下：
const user={
状态：{
权限：[]
},
突变：{
SET_PERMISSIONS: (state，permissions)={
状态.权限=权限
}
},
动作：{
getPermissions({commit}) {
queryPermissions().然后(res={
会话存储。setitem( permissions ，JSON.stringify(res))
this.dispatch(setPermissions ，RES)；//调本组件里的方法
})
},
setPermissions({commit，dispatch，state，rootState}，data) {
提交( SET_PERMISSIONS ，数据);//本组件的犯罪
分派( setMenuData ，数据);//调菜单里的方法
控制台。日志(根状态。菜单。菜单)；//取菜单里的参数
}
}
}
导出默认用户
常量菜单={
状态：{
菜单：[]
},
突变：{
SET_MENUS: (state，data)={
state.menus=data
}
},
动作：{
setMenuData({commit，state}，data) {
提交(设置菜单，数据);
}
}
}
导出默认菜单
解释：
行动里各个方法的第一个参数其实有很多属性，只是我们平时习惯了解构的写法，如setMenuData({commit，state}，Data)。当把第一个参数的值全输出，如setMenuData(param，Data)，输出参数会发现其中包含以下属性：
vue文件调用store的action方法
常量操作={
//根据权限动态生成路由
异步生成路由({提交}) {
//执行代码
}
}
已创建(){
this.generateRoutes()
},
方法：{
.mapActions(菜单,[
"生成路由"
])
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。