为什么我的name数据不是响应式的
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<h1 @click="handleClick">{{name}}</h1>
</div>
</template>
<script>
import { useStore} from 'vuex';
import { ref } from 'vue';
export default {
name: 'Home',
components: {
},
setup(){
const store = useStore();
const name = ref(store.state.name);
const handleClick = ()=>{
//store.dispatch('changeName','hello world');
store.commit('changeName','hello world');
}
return{
name,handleClick
}
}
}
</script>
老师我用ref去包装store.state.name为什么去修改这个name还不是在响应式的
老师通过const { name } = toRefs(store.state);然后去修改确可以做到响应式的
正在回答
同学你好，解答如下：
const name = ref(store.state.name)这句代码，相当于我们自己定义了一个变量name。它与vuex中的name并不是同一个变量，只是初始值与vuex中的name相同。所以修改vuex中的name，并不会影响我们自己定义的这个name。如果想修改该name，需要如下这样写：
而const { name } = toRefs(store.state)这样写，则是直接使用vuex中的name，并没有定义新的变量name。修改vuex中的name时，则会同步修改页面中引入的name：
建议同学按照const { name } = toRefs(store.state)这种写法，使用vuex中的数据。
祝学习愉快！
-
老师，我也是按上面的同学这样写的，(但是我是在about页面用的compositionAPI) 虽然一开始在about页面中没生效，但是切换到home页面是生效的，这个我理解为什么生效，但是再切回about页面生效了，这我就不理解了，不是说about页面的name是自定义的，并不是vuex中的name吗?
about.vue
<template> <div class="about"> <h1>{{name}}</h1><button @click='changeName'>修改名称</button> </div> </template> <script> import { ref } from 'vue' // import { toRefs } from 'vue' import {useStore} from 'vuex' export default { setup() { const store=useStore(); //************错误解析*********这样写不生效的原因是 此时的name是自定义的name，不是store中name let name=ref(store.state.name) //************正确写法*********将name从store中解构出来 // let {name}=toRefs(store.state) const changeName=function(){ store.commit('changeName','12345') } return {name,store,changeName} }, } </script>点击按钮之前
点击按钮后，可以看到控制台已经打印出name的值 12345 ，页面没变
切到home
切回about
2022-02-21 17:34:56 -
同学你好，点击导航切换页面的时候，会重新执行js代码，也就是setup中会获取当前最新的state数据，所以当再点击About的时候，会显示新的数据"12345"。2022-02-21 18:25:01
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星