uniapp的vue3版本使用vuex靈活存取數據

新建store.js

// store/index.js
import { createStore } from 'vuex';
 
const store = createStore({
  state() {
    return {
      count: 0,
      userInfo: null,
	  name:"hq"
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
	setChangename(state, userInfo) {
	  state.name = userInfo;
	},
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
    fetchUserInfo({ commit }) {
      setTimeout(() => {
        const userInfo = { name: 'Jane Doe', age: 26 };
        commit('setUserInfo', userInfo);
      }, 1500);
    },
	changename({ commit },username) {
	   commit('setChangename',username);
	},
  },
  getters: {
    count(state) {
      return state.count;
    },
    userInfo(state) {
      return state.userInfo;
    },
	name(state) {
	  return state.name;
	},
  },
});
 
export default store;

main.js　注冊 Vuex store

// #ifdef VUE3
import store from './store/in.js'
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(store) // 注冊 Vuex store
  return {
    app
  }
}
// #endif

頁面中使用,index.vue　

<template>
  <view>
    <text>{{ message }}--{{foo}}</text>
    <button @click="handleClick">點擊我</button>
    <button @click="chageval(123)">調用xmin</button>
    <text>number:{{ count }}</text>
    <button @click="increment">修改count</button>
    <button @click="incrementAsync">修改count2</button>
    <view v-if="userInfo">
     <text>用戶信息：{{ userInfo.name }}{{ userInfo.age }}歲</text>
    </view>
    <button @click="fetchUserInfo">獲取用戶信息</button>
    <view>{{name}}</view>
    <button @click="changename">修改名稱</button>
  </view>
</template>

<script setup>
import { useStore } from 'vuex';
import { useMyLogic } from '@/minxi/loadmore.mixin.js';
import { onShow,onReachBottom } from "@dcloudio/uni-app";
import { ref,computed} from 'vue';
const { foo, chageval,myMethod } = useMyLogic();
const message = ref('Hello, uniapp with Vue3!');
const store = useStore();  // 獲取 Vuex store
const count = computed(() => store.getters.count);
const userInfo = computed(() => store.getters.userInfo);  // 獲取用戶信息
const name = computed(() => store.getters.name);  // 獲取用戶信息
const handleClick = () => {
  message.value = 'Button clicked!';
  foo.value='aaaa'
};
onShow(()=>{
    console.log("onshow");
})
 const increment = () => {
    store.commit('increment');  // 提交 mutation
};
 const incrementAsync = () => {
    store.dispatch('incrementAsync');  // 調用 action
}
const fetchUserInfo = () => {
    store.dispatch('fetchUserInfo');  // 調用 action
}
const changename = () =>{
    store.dispatch('changename','照亮'); 
}
</script>

<style scoped>
/* 樣式部分 */
</style>

posted @ 2025-04-11 08:23 小小強學習網閱讀(147) 評論(0) 收藏舉報

刷新頁面返回頂部

小小強學習網

uniapp的vue3版本使用vuex靈活存取數據

公告