Vue3中封装setup函数中的mapstate改进封装

由于在vue3 compositionApi中 setup函数无法获取this,在使用vuex的时候获取this.$store.state.xx会比较繁琐,而vuex中的函数mapState返回值为函数类型,无法使用computed直接返回具体的数值(会提示缺失$stote),考虑使用bind函数重新封装mapState返回的函数,通过bind指定一个绑定$store,参数为useStore,从而变成可以被computed调用的函数,返回的直接为ref对象从而在template中直接使用

import { computed } from 'vue'
import { mapState, useStore } from 'vuex';
export function useState(arr) {
    const store = useStore()
    const storeStateFns = mapState(arr)
    const storeState = {}
    Object.keys(storeStateFns).forEach(key => {
        const fn = storeStateFns[key].bind("$store", store)
        //执行fn 实质上仍然 执行$store 但无法获取 只能useStore获取-》每个函数绑定this

        storeState[key] = computed(fn)
    })
    return storeState
};

 

推荐这些文章:

Vue3 全家桶,从 0 到 1 实战项目

前端发展百花放,一技未熟百技出。未知何处去下手,关注小编胜百书。 我是前端人,专注分享前端内容!

本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 componsition API 的使用。目的是让未接触过 vue3 的同学快速上手。
一、vue3.0 创建项目
vue3 创建项目的时候有两种方式,第一种就是官方推荐的 vite 。另外一种就是使用 webpack 创建。
1.1、vite 创建项目
vite 需要 Node.js >= 12.x版本。所以使用 vite 搭建项目之前,请先检查 node 版本!
运行 :$ npm...

Vue3如何在组件中定义单独的store

 文章来源:https://www.cnblogs.com/flicat/p/15813765.html
首先,定义页面组件store,同时引入全局store(如果有需要用到全局store的话)到 modules:

// store.jsimport global from '@/store'
import { createStore } from "vuex"

const store = createStore({
state: {
userInfo: null
},
mutations: {

},
actions: {},
mod...

vue3-组件中使用setup函数获取vuex中的数据的新方式

传统方式

setup() {
const store = useStore()
//传统方式
const aName = computed(() => store.state.name)
return {
aName
}

如果数据多一点一个一个导入就十分的不方便
我们可以使用这样一种方法

setup() {
const store = useStore()

 //如果想一次拿到想要的数据
const storeStateFns = mapState(["counter", "name"])
...

vuex mapstate_学习 vuex 源码整体架构,打造属于自己的状态管理库

vuex mapstate_学习 vuex 源码整体架构,打造属于自己的状态管理库:https://blog.csdn.net/weixin_39899244/article/details/110469658?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3
 
前言
你好,我是若川。这是学习源码整体架构第五篇。整体架...

vuex在vue3中使用mutation/actions/state/getters的几种形式说明

补充:vuex在vue3中使用mutation/actions/state/getters的几种形式说明*
1.在template直接使用,$store在template中不能识别会飘红但是不影响使用,去掉飘红在d.ts的文件中加上declare const $store:any
2.非辅助函数方式
state 在setup放回的函数中通过key:computed(()=>store.state.值) --->在module中 key:computed(()=>store.state.moduleName[stateName])
getters key:computed((...

使用vue3 CompositionAPI手撸vuex,更好的理解vuex的工作原理

需要到的api
 
provide 顶层组件提供数据
inject   任意子组件获取数据
reactive 将state变成响应式数据
 
1. 从vue3中倒入API: inject,reactive

import {inject, reactive} from 'vue'

2. 声明一个store的key

const STORE_KEY = '__store__'

3. 子组件通过调用函数useStore获取顶层组件提供的数据

function useStore(){
return inject(STORE_KEY)
}
...

Vuex下载导入(vue2.0)

步骤概览
第一步:npm i vuex -S 或者 yarn add vuex -S (通常只是在开发阶段使用)
第二步: 创建store/index.js import vuex from 'vuex' import vue from 'vue'
第三步:Vue.use(vuex)
第四步:const store = new Vuex.Store({...配置项})
第五步:导出 export default store
第六步:导入main.js 在根实例配置 store 选项指向 store 实例对象
1.下载 vuex
终端命令yarn add vuex -S 或者 npm i vu...

在composition API 中使用mapState

import { computed, useState } from 'vue'
import { mapState } from 'vue'
1 setup() { 2 const store = useStore() 3     // computed() 返回值是一个ref 4 const sCounter = computed(() => store.state.counter) 5 6 // 函数 7 const storeStateFns = mapState(['counter', 'name', 'age']) 8 // 存放computed处理后...

692 vuex:store,Vue devtool,单一状态树,组件获取状态,mapState,getters,mapGetters,mutation及常量,mapMutations,actions,mapActions,module、局部状态、命名空间、修改或派发根组件、createNamespacedHelpers

什么是状态管理

复杂的状态管理

Vuex的状态管理

Vuex的状态管理

Vuex的安装

创建Store

组件中使用store

Vue devtool

手动安装devtool

单一状态树

组件获取状态

在setup中使用mapState

getters的基本使用

getters第二个参数

getters的返回函数

mapGetters的辅助函数

Mutation基本使用

Mutation携带数据

Mutation常量类型

mapMutations辅助函数

mutation重要原则

actions的基本使用

...

vuex里mapState,mapGetters使用详解

/*getter是state的get方法,没有get页面就获取不到数据

获取页面:
import {mapGetters,mapActions} from 'vuex'
<h1>{{count}}</h1>
computed:mapGetters([
'count'
]),

store.js:

var state = {
count:6
},
var getters={
count(state){
return state.count
}
}

改变数据页面:
<button @click="increment">增加</but...

文章标题:Vue3中封装setup函数中的mapstate改进封装
文章链接:https://www.dianjilingqu.com/50915.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>