在uni-app使用vue3使用vuex

在uni-app使用vue3使用vuex

1.在项目目录中新建一个store目录,并且新建一个index.js文件

js 复制代码
import { createStore } from 'vuex';
 
export default createStore({
  //数据,相当于data
  state: {
    count:1,
    list: [
      {name: '测试1', value: 'test1'},
      {name: '测试2', value: 'test2'},
      {name: '测试3', value: 'test3'},
    ],
  },
  getters: {
    
  },
  //里面定义方法,操作state方发
  mutations: {
    add(state){
			state.count++
		}
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})

2.配置main.js文件

js 复制代码
import App from './App'
import store from './store';  //加上这里
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import uviewPlus from '@/uni_modules/uview-plus'
import { createSSRApp } from 'vue' 
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  app.use(store); //加上这里
  return {
    app
  }
}
// #endif

3.在文件中引用使用

js 复制代码
import {mapState,mapMutations} from 'vuex' //mapState是存的数据,mapMutations是存的方法
...mapState({
      list: state => state.list  //相当于重命名了
 }),

或者换一个简写

js 复制代码
  computed:{
    ...mapState(['count','list']),
  }

在 onLoad()中可以打印出来

js 复制代码
 onLoad() {
   console.log(this.count)
 },

使用缓存方法,在methods中:

js 复制代码
methods:{
	...mapMutations(['add']),
}

在需要的位置直接用

js 复制代码
  onLoad() {
    console.log(this.count) //1
    this.add();
    console.log(this.count) //2
   }
相关推荐
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1235 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木7 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350237 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:8 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
90后的晨仔9 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗10 小时前
【React】TimePicker进阶:解决开始时间可大于结束时间的业务场景与禁止自动排版
javascript·react.js·ant design
今天头发还在吗10 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥10 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
90后的晨仔10 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js