uniapp Vuex 状态管理模式基本使用

一、uniapp 引入定义挂载Vuex

1、在根目录下建立store目录创建index.js文件

代码如下

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //相当于data state:{ loginStatus:false }, //相当于computed getters:{ reverseLoginStatus(state){ return state.loginStatus + 1 } }, //相当于methods mutations:{ changeLoginStatus(state,playload){ state.loginStatus = playload.num; } }, //可以同时执行多个mutations方法 actions:{ loginStatusAction(context,playload){ console.log(playload) context.commit('changeLoginStatus',{num: playload.number}) } } })

2、在mian.js 中挂载store

import Vue from 'vue' import App from './App' import store from './store/index.js' // 引入 Vue.prototype.$store = store // 定义成全局组件 Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ store, //挂载 ...App }) app.$mount()

二、uniapp中使用vuex

1、直接调用state中的值

this.$store.state.loginStatus

2、修改state中的值

这里需要在mutations中定义修改的方法，如上changeLoginStatus

this.$store.commit('changeLoginStatus',{num:123,age:12}) //调用vuex中的mutations方法

3、调用actions中的方法

this.$store.dispatch('loginStatusAction',{number:123}) //调用vuex中的actions方法

4、调用getters中的方法

this.$store.getters.reverseLoginStatus //调用vuex中的getters方法

5、状态方法监控

//导入vuex的mapState跟mapMutations方法 import {mapState,mapMutations} from 'vuex' methods: { //对全局方法changeLoginStatus进行监控 ...mapMutations(['changeLoginStatus']) }, computed:{ //对全局变量loginStatus进行监控 ...mapState(['loginStatus']) }