Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。比如token,登录后共享token,改变haslogin登录状态。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
hasLogin: false,
token: '',
myinfo: {},
unitid:''
},
mutations: {
// 登录成功
login: function(state, token) {
state.hasLogin = true
state.token = token
},
// setToken:function(state,token){
// state.token =token
// },
// 保存个人信息,obj是一个对象
setMyinfo: function(state, obj) {
// 合并对象 两种
// state.myinfo = { ...state.myinfo,
// ...obj
// }
state.myinfo=Object.assign({},state.myinfo,obj)
},
// 退出
logout:function(state){
state.hasLogin = false
state.token=''
state.myinfo={}
}
}
})
export default store
main.js
为了在 Vue 组件中访问 this.$store property,你需要为 Vue 实例提供创建好的 store
import Vue from 'vue'
import App from './App'
import store from './store/index.js'
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:
computed: {
hasLogin: function() {
return this.$store.state.hasLogin
},
myinfo: function() {
return this.$store.state.myinfo
}
},
this.$store.commit('login', res.data.token)
this.$store.commit('setMyInfo', res.data.myinfo)
login() {
if (this.hasLogin == false) {
uni.navigateTo({
url: '/pages/index/login'
})
}
},
提示未登录
onShow: function() {
if (this.hasLogin == false) {
uni.showModal({
title: "提示",
content: "您还未登录,请先登录",
confirmText: "登录",
success: res => {
if (res.confirm) {
uni.navigateTo({
url: '/pages/index/login'
})
}
}
})
return
}
if (this.trainerid == undefined || this.trainerid == 0 || this.trainerid == '') {
toast('您还没有排班', false)
} else {
this.fetchdata()
}
},
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类
Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。
你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法。
在大多数情况下,载荷应该是一个对象
提交 mutation 的另一种方式是直接使用包含 type 属性的对象…