账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
Vuex 4 使用教程
来自主题 : 技术分享   ·  作者 : No.1 小码哥     ·  发布时间 : 11/16/2021   ·  浏览次数  :  212

安装 vuex

npm install vuex@next --save

创建状态仓库文件

/store/test.ts

import { createStore } from 'vuex';
const store = createStore({
    state(){
        return {
            name : "test store",
            age  : 18
        }
    },
    mutations:{
        setName(state, name){
            state.name =  name;
        }
    }
});

export default store;

在组件中使用

<script setup lang="ts">
import test from './store/test';
import { onMounted, watch } from 'vue';
onMounted(() => {
    console.log(test.state.name)
    setTimeout(() => {
        test.commit('setName', 'change ...');
    }, 3000);
});
watch(test.state, ()=>{
    console.log('test..........  change .........')
});
</script>


收藏此文
相关回复
{{comment.u_nickname}}
{{comment.u_nickname}} @ {{comment.comments_reply_uname}}
{{comment.comments_content}}
 {{comment.comments_date}}
 点赞 ({{comment.comments_like_count}})   回复 ({{comment.comments_reply_count}})
{{commentSon.u_nickname}}
{{commentSon.u_nickname}} @ {{commentSon.comments_reply_uname}}
{{commentSon.comments_content}}
 {{commentSon.comments_date}}
 点赞 ({{commentSon.comments_like_count}})   回复 ({{commentSon.comments_reply_count}})
{{loadmoreText}}