vuex 就不多做介绍啦,大家都明白
uniApp内已经内嵌了vuex,直接挂载使用就好啦
- 根目录创建store目录,创建index.js文件;
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
hasLogin: false, // 登录状态
userInfo: {}, // 用户信息
},
mutations: {
setHasLogin(state, value){
state.hasLogin = value
console.log(state.hasLogin)
}
},
actions: {},
getters: {}
})
- 在mian.js 中挂载store
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'
const app = new Vue({
...App,
store,
})
app.$mount()
- uniapp中使用vuex
3.1 获取state中的值
this.$store.state.loginStatus
3.2 修改state中的值这里需要在mutations中定义修改的方法,如上setHasLogin
this.$store.commit('setHasLogin', true);
3.3 调用actions中的方法这里需要在actions中定义方法
this.$store.dispatch('',{number:123})
3.4 调用getters中的方法这里需要在getters中定义方法
this.$store.getters.reverseLoginStatus
- 状态方法监控
//页面内导入vuex的mapState跟mapMutations方法
import { mapState, mapMutations } from 'vuex'
computed: {
...mapState(['hasLogin'])
}
methods: {
...mapMutations(['setHasLogin']),
}
作者:张思学
链接:https://www.jianshu.com/p/8215fbda2324
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。