Vue的状态管理

最新推荐文章于 2022-03-31 13:46:31 发布

黑白子2000

最新推荐文章于 2022-03-31 13:46:31 发布

阅读量54

点赞数

分类专栏：前端文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/weixin_45079974/article/details/120705706

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

从零打造简单状态管理

状态管理

状态管理

如果你有一处需要被多个实例间共享的状态，你可以使用一个 reactive 方法让对象作为响应式对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态管理</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app-a">App A: {{ message }}</div>

    <div id="app-b">App B: {{ message }}</div>

    
    <script>
        const {createApp,reactive} =Vue
        const sourceOfTruth=reactive({
            message:"Hello"
        })

        const appA=createApp({
            data(){
                return sourceOfTruth
            },

        }).mount("#app-a")

        const appB=createApp({
            data(){
                return sourceOfTruth
            },
            mounted(){
                sourceOfTruth.message='GoodBye'
            }
        }).mount("#app-b")
    </script>
</body>
</html>

如何能更好的解决这个问题可以引入store模式，状态都放置在 store 自身的 action 中去管理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入store</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app-a">{{sharedState.message}}</div>

    <div id="app-b">{{sharedState.message}}
        <button @click="clearState"></button>
    </div>
    <script>
        const {createApp,reactive} =Vue
        const store = {
            debug: true,
            state: reactive({
                message: 'Hello!'
            }),
            setMessageAction(newValue) {
                if (this.debug) {
                    console.log('setMessageAction triggered with', newValue)
                }
                this.state.message = newValue
            },
            clearMessageAction() {
                if (this.debug) {
                    console.log('clearMessageAction triggered')
                }
                this.state.message = ''
            }
        }

        const appA = createApp({
            data() {
                return {
                    privateState: {},
                    sharedState: store.state
                }
            },
            mounted() {
                store.setMessageAction('Goodbye!')
            }
        }).mount('#app-a')

        const appB = createApp({
            data() {
                return {
                    privateState: {},
                    sharedState: store.state
                }
            },
            methods:{
                clearState(){
                    console.log("准备清除数据");
                    store.clearMessageAction()
                    console.log("打印清清除后的结果",store.state.message);
                    store.setMessageAction("这是测试数据")
                    console.log("设置了新值",store.state.message);
                }
            }
        }).mount('#app-b')

    </script>
</body>

</html>

黑白子2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的状态管理

从零打造简单状态管理状态管理状态管理如果你有一处需要被多个实例间共享的状态，你可以使用一个 reactive 方法让对象作为响应式对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫

专栏目录