首页 > 建站教程 > 前端框架 >  uni-app vue3版store使用正文

uni-app vue3版store使用

uni-app默认使用的vue2,这次新项目,不能再墨守成规,改成了vue3,之前的store引入方式等都要改了。


1、新建 store/index.js,代码如下:

import Vuex from 'vuex'
const store = new Vuex.Store({
  state: {
    userInfo:'',
    token:'测试token'
  },
  mutations: {
    // 登录
    login(state, data) {
      state.token = data;
      uni.setStorage({
        key: 'token',
        data: data
      });
    }
  },
  actions: {}
})
export default store


2、main.js引入,use使用,并定义成公共方法:

import App from './App'
//引入vuex
import store from './store'
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // 定义公共方法,使用方法和之前Vue.prototype.$store定义的一样,避免每次使用store都要引入
  app.config.globalProperties.$store = store
  // use store
  app.use(store)
  return {
    app
  }
}


3、在非composition api和非setup语法糖中使用:

onLaunch: function() {
  // 调用store里的方法
  this.$store.commit('login', 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9')
  // 使用store里的值
  console.log(this.$store.state.token)
}


4、在composition api或setup语法糖中使用

import {getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();//获取公用方法proxy.$axios,或者use中方法
const {$store}=proxy
// 调用store里的方法
$store.commit('login', 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9')
// 使用store里的值
console.log($store.state.token)