vue3笔记 provide/inject与vuex及运用插件持久化存储

Dummerd

已于 2023-01-25 20:31:46 修改

阅读量321

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

于 2023-01-25 19:16:25 首次发布

本文链接：https://blog.youkuaiyun.com/Dummerd/article/details/128730719

博客介绍了Vue中provide/inject和Vuex的相关内容。provide/inject的数据是响应式的，组件数据改变会影响引用组件。对于Vuex，需先安装插件，在store的index.js里配置，还可进行modules模块划分，也能运用插件实现持久化存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

provide/inject

1.父组件

子组件

孙组件

数据是响应式的，一旦某个组件数据发生改变，另外引用的组件也会发生改变

总结：

vuex

首先安装vuex插件 npm install vuex

在store下面的index.js里

import {createStore} from "vuex"
export default createStore({
	state:{
		num:10,
		sum:20
	},
	getters:{
    total(state){
		return state.num+state.sum
	}
	},
	mutations:{
		changeNum(state,val){
			state.num=val
		}
	},
	actions:{
		changeBtn(){
			alert('1')
		}
	}
})

在组件中调用修改等

<template>
<div>
    <h1>这是A组件</h1>
    {{num}}===>{{total}}
    <button @click="btn">按钮</button>
    <button @click='changeBtn'>按钮2</button>
</div>
</template>

<script setup>
import { computed } from "@vue/runtime-core"
import { useStore } from "vuex"
let store = useStore()
// let num = store.state.num  //错的，这样的话修改不了vuex的值
let num =computed(()=>store.state.num) 
console.log(store.state.num)
// let total = store.getters.total
let total =computed(()=>store.getters.total) 
const btn =()=>{
    store.commit('changeNum',800) //也可以传参，用val接收
}
const changeBtn =()=>{
    store.dispatch('changeBtn')
}
</script>
<style scoped>
</style>

modules模块划分，和vue2写法一样

user.js里

export default{
    state:{
        userInfo:'info'
    },
    mutations:{
        changeInfo(state){
        state.userInfo="123"
        }
    }
}

index.js里

import {createStore} from "vuex"
import user from './modules/user'
export default createStore({
modules:{
	user
},
})

引入vuex见上面写法

A组件

<template>
<div>
    <h1>这是A组件</h1>
    {{userInfo}}
    <button @click="btn">按钮</button>
    <button @click='changeBtn'>按钮2</button>
</div>
</template>

<script setup>
import { computed } from "@vue/runtime-core"
import { useStore } from "vuex"
let store = useStore()
// console.log(store.state.user.userInfo)
let userInfo = computed(()=>store.state.user.userInfo)
const btn =()=>{
    store.commit('changeInfo')
}

</script>
<style scoped>
</style>

运用插件持久化存储

npm i vuex-persistedstate -S

在index.js里

import {createStore} from "vuex"
import persistedState from 'vuex-persistedstate'
import user from './modules/user'
export default createStore({
modules:{
	user
},
plugins:[persistedState({
	key:"xiaoyang",
	paths:['user']  //需要存储的参数
})]
})