全局变量配置

1、react18.3 全局变量配置

• 3-1、安装与配置

  npm install react-redux  @reduxjs/toolkit

1. 新建store/store.ts

   import { configureStore } from '@reduxjs/toolkit'
   import counterReducer from '@/store/slicer/CountSlicer'
   export const store = configureStore({
   reducer: {
   counter: counterReducer
   }
   })
     
   export type RootState = ReturnType<typeof store.getState>
   export type AppDispatch = typeof store.dispatch

2. 新建slicer/CountSlicer.ts

    import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
    import { login } from '@/api/user.ts'
    export interface CounterState {
    value: number
    }

    export const SFlogin = createAsyncThunk(
    'users/fetchByIdStatus',
    async(data) => {
    const response = await login(data)
    return response.data
    }
    )

    export const counterSlice = createSlice({
    name: 'counter',
    initialState: { SloginData: {}, Svalue: 0 },
    reducers: {
    SFincrement: (state) => {
    state.Svalue += 1
    },
    SFdecrement: (state) => {
    state.Svalue -= 1
    }
    },
    extraReducers: (builder) => {
    builder.addCase(SFlogin.fulfilled, (state, action) => {
    state.SloginData = action.payload
    })
    }
    })

    export const { SFincrement, SFdecrement } = counterSlice.actions
    export default counterSlice.reducer

• 3-2、页面使用

    import type { RootState } from '@/store/store'
    import { useSelector, useDispatch } from 'react-redux'
    import { SFincrement, SFdecrement, SFlogin } from '@/store/slicer/CountSlicer'
    export default function Home() {
    const dispatch = useDispatch()
  
    const Svalue = useSelector((state: RootState) => state.counter.Svalue)
    const SloginData = useSelector((state: RootState) => state.counter.SloginData)
  
    const _increment = () => dispatch(SFincrement())
    const _decrement = () => dispatch(SFdecrement())
  
    const _qingqiu = async() => {
    let data = { email: 'huangrong@imooc.com', pass: 'huangrong' }
    await dispatch(SFlogin(data))
    console.log(SloginData)
    }
  
    return (
    <div>
    <span>Svalue的值：{Svalue}</span>
    <button onClick={_increment}>增加</button>
    <button onClick={_decrement}>减少</button>
    <div>
    <span>SloginData的值：{SloginData.token}</span>
    <button onClick={_qingqiu}>请求接口</button>
    </div>
    </div>
  
    )
    }

2、小程序 全局变量配置

• 3-1、 安装与配置

    npm install --save mobx-miniprogram mobx-miniprogram-bindings

  创建store/numstore.js

  import {observable,action} from 'mobx-miniprogram'
    export const numStore = observable({
      numA:1,
      numB:2,
      update:action(function(){
      this.numA += 1
      this.numB += 1
      }),
     //computed计算属性前面要加get，必须有返回值
     get sum(){
      return this.numA + this.numB
      }
    })

• 3-1、组件使用

  <view>
    <view>{{numA}}+{{numB}}={{sum}}</view>
    <button bind:tap="update">更新store数据</button>
  </view>

  import { ComponentWithStore } from 'mobx-miniprogram-bindings'
  import {numStore} from '../../stores/numstore'
    ComponentWithStore({
      storeBindings:{
        store:numStore,
        fields:['numA','numB','sum'],
        actions:['update']
      }
  })

• 3-3、页面page使用 创建behavior.js

   import {BehaviorWithStore} from 'mobx-miniprogram-bindings'
  import {numStore} from '../stores/numstore'
  import {testStore} from '../stores/teststore'
  export const listBeh = BehaviorWithStore({
  storeBindings:[
  
         {
             store:numStore,
             fields:{
                 nA:()=>numStore.numA,
                 nB:()=>numStore.numB,
                 sumA:()=>numStore.sum
             },
             actions:{
                 updateData:'update'
             }
         },
         {
             namespace:'testStore',
             store: testStore,
             fields:{
                 nA:()=>testStore.numA,
                 nB:()=>testStore.numB,
                 sumA:()=>testStore.sum
             },
             actions:{
                 updateData1:'update'
             }
         },
     ]
  })

  pages引用

  import {listBeh} from '../../beh/behavior'
  Page({
    behaviors:[listBeh]
  })

  pages的wxml引用

  <view overflow->
      <view>{{numA}}+{{numB}}={{sum}}</view>
      <button bind:tap="update">page更新store数据</button>
  </view>

3、vue3.5 全局变量配置

• 2-1、 安装配置

     npm install pinia

  1. main.ts

        import { createApp } from 'vue'
        import App from './App.vue'
        import router from './router/router.ts'
        import { createPinia } from 'pinia'
        const pinia = createPinia()
        // 使用use函数将pinia引入
        createApp(App).use(router).use(pinia).mount('#app')

  2. 创建stores/user.ts

        import { defineStore } from 'pinia'
        import { reactive } from 'vue'
        import { login, infos } from '@/api/user.ts'
        export const useUserStore = defineStore('user', () => {
        const Slogindata = reactive({ data: '' })
        const Sinfo = reactive({ data: '' })
          
        async function SFlogin(data) {
        let result = await login(data)
        Slogindata.data = result.data
        document.cookie = 'token=' + result.data.token
        }
        async function SFinfo() {
        let result = await infos()
        Sinfo.data = result.data
        }
        return { Slogindata, SFlogin, Sinfo, SFinfo }
        })

• 2-2、页面触发store方法并获取值

   <script setup lang="ts">
   import Father from '@/components/Father.vue'
   import { useUserStore } from '@/stores/user.ts'
   const userStore = useUserStore()
   // 登录
   const _login = async() => {
     let data = { email: 'huangrong@imooc.com', pass: 'huangrong' }
     await userStore.SFlogin(data)
     console.log(userStore.Slogindata.data.token)
   }
   // 获取用户信息
   const _getUserInfo = async() => {
     await userStore.SFinfo()
     console.log(userStore.Sinfo.data)
   }
   </script>
   <template>
     <div>
       <Father/>
       <button @click="_login">store异步操作(登录)</button>
       <button @click="_getUserInfo">store异步操作(获取用户信息)</button>
     </div>
   </template>
   
   <style scoped>
   
   </style>