脚本宝典收集整理的这篇文章主要介绍了【Vue1.0】——Vuex1.0使用教程(简单并附代码),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我理解的vuex是用来管理vue的全局变量的,并且可以数据实时更新
先看一下你用的vue是哪个版本,安装对应的vuex,因我之前使用的vue1.0,所以安装的vuex1.0
在当前项目文件夹npm install vuex@1.0
在app文件夹下建vuex文件夹,文件夹内包括两个文件:store.js和actions.js。
store.js
用于定义state和mutations,代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
//登录状态
logStatus:false,
//角色
role:''
}
const mutations = {
//设置登录状态
SET_LOGSTATUS(state,val){
state.logStatus=val
},
//设置角色
SET_ROLE(state,val){
state.role=val
}
}
export default new Vuex.Store({
state,
mutations
})
actions.js
用于对变量的操作,代码
export const setLogStatus = ({ dispatch },val) => {
//注意,这里的SET_LOGSTATUS对应的就是store.js,一定要一模一样
dispatch('SET_LOGSTATUS',val)
}
export const setRole = ({ dispatch },val) => {
dispatch('SET_ROLE',val)
}
最高级的vue父组件中引用,这样后面的子组件就不用再引用了
<script>
import store from './vuex/store.js'
export default {
store: store
}
</script>
在子组件中的使用如下
<script>
import { setLogStatus,setRole } from '../vuex/actions'
export default {
vuex: {
actions: {
setLogStatus,
setRole
},
getters:{
logStatus:state=>state.logStatus,
role:state=>state.role
}
},
methods:{
logIn:function(){
//...省略业务相关代码...
this.setLogStatus(true);
this.setRole('客服');
}
}
</script>
当然,如果不需要修改store.js中变量的值,在子组件中只要getter就好,不需要import和actions了
以上是脚本宝典为你收集整理的【Vue1.0】——Vuex1.0使用教程(简单并附代码)全部内容,希望文章能够帮你解决【Vue1.0】——Vuex1.0使用教程(简单并附代码)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。