vuex初始化配置及快速调用

Posted 2022-01-30 帅气的黑桃J

简介

封装起来便于快速调用

官方文档

笔者又写了一遍是因为笔者只需要map的方式调用。

快速上手

init

• 创建store/index.js文件
• index.js代码部分

import Vue from 'vue'
import Vuex from 'vuex'
//本人对request和API进行了封装
//import request from '../common/request.js'
//import api from '../common/API.js'



Vue.use(Vuex)

export default new Vuex.Store(
	state:
		test:'this is test',
        deviceUsageInfo:
	,
	getters:
		getTest:state=>
			return state.test
		
	,
	mutations:
		getDeviceUsageInfo_m(state)
			request.get(
				url: api.get_device_info
			).then(res=>
				let jsonRes = JSON.parse(res)['data']
				state.deviceUsageInfo = jsonRes
				console.log('[info] init DeviceUsageInfo')
			)
		
	,
	actions:
		getDeviceUsageInfo(commit)
			commit('getDeviceUsageInfo_m')
		
        
	
)

注意事项：

• 在Actions中的getDeviceUsageInfo方法中传入的commit为context的解构，可以直接使用context类中的commit方法

• main.js

import App from './App'

import Vue from 'vue'
import store from './store'

Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(
    ...App
)
app.$mount()

注意事项:

• 如果您对request和API进行了封装，那么您需要在index.js中导入您的request库和API库，在mutation中无法使用this.request()进行调用，所以必须要导入您封装的request库，用request()进行调用

page页面调用

• index.vue

<template>
    <view>
		<view>getTest</view>
		<view>deviceUsageInfo</view>
    </view>
</template>
<script>
    import mapGetters,mapState,mapActions  from 'vuex'
	export default 
        onLoad()
            this.getDeviceUsageInfo()
        ,
	    computed:	
			...mapState (['deviceUsageInfo']),
            ...mapGetters(['getTest'])
		,
    	methods:
        	...mapActions(['getDeviceUsageInfo']),
            // 有参(荷载)形式的Action
            method1(data)
                store.dispatch('getDeviceUsageInfo',data)
            ,
               
    
</script>

问题积累

在App.vue中调用Actions中的函数可能会出现以下结果，请检查您的导包语句是否正常，App.vue是可以正常导入map的