uniapp vuex.store 状态管理

在uniapp中如果要使用 vuex 的store状态管理

首先，在根目录创建文件夹 store （也可以自己命名），并在其下创建文件 index.js

然后再 store/index.js 中写入基本结构

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state:{
  // 可用于存储信息
  userinfo:{},
  // 记录用户登录状态
  hasLogin:false
 },
 mutations:{
  login(){
   // 用户登录
  },
  logout(){
   // 用户登出
  }
 }
})
export default store;

重点来了，请拿起小本本记起来！

光前面两步还不能直接调用，还需要把他加载！

打开根目录的 main.js，在 const app = new Vue({ ...App }) 前面，引入并挂载 store 

// 引入store文件
import store from 'store/index.js'
// 将store挂载到vue中
Vue.prototype.$store = store

这样就可以在项目的任意页面，使用 this.$store.state.userinfo 获取store中存储的 userinfo 信息了。

但是store的方法不能这样调用！！！

store中的login或者logout方法必须使用  dispatch 或 commit 进行调用。

// getUserInfo是假定的方法名
this.$store.dispatch("getUserInfo");

// login是假定的方法名，data是假定的参数
this.$store.commit("login",data);

commit 赋值

dispatch 异步调用

还可以使用uniapp提供的 uni.$emit 方法进行通讯

使用 uni.$on 或 uni.$once 进行接收