跳至主要內容
使用Pinia

Pinia全局状态管理

一、Pinia基本使用

1.安装 Pinia

2.注册Pinia

import { createApp } from "vue";
import App from "./App.vue";

// 导航pinia的createPinia方法
import { createPinia } from "pinia";
// 创建 pinia实例
const pinia = createPinia();
const app = createApp(App);
// 注册pinia插件
app.use(pinia);

app.mount("#app");

xiaoye大约 6 分钟VuePinia
样式私有化

样式私有化

单页应用开发中,所有组件的css最终会整合到一个html中,样式私有化在单页应用中是一个需要去解决的问题。

vue css样式私有化

vue中样式私有化十分简单,style上加入scoped即可。要覆盖第三方样式使用::v-deep即可,原理如下:

原理就是 属性选择器

第三方样式无法覆盖的原理,

react css样式私有化

react并没有vue这一套机制,目前没有一个特定的方式。所以当前市面上流行的有如下几种,这几种各有优缺点,请根据实际应用场景进行选择。


xiaoye大约 4 分钟ReactReact样式私有化
Redux

redux

安装

yarn add react-redux

基本使用

借助react-redux提供的组件Provider,全局注入store

import React from 'react'
import ReactDOM from 'react-dom/client'
// import App from './App'
import Vote from './Vote'

// 导入redux仓库
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <Vote />
  </Provider>
)

xiaoye大约 5 分钟ReactReactRedux
2
3
4
5
...
25