vuex的state的实时变化渲染到视图的问题

Question

vuex的state的值改变了，但视图的却没变

store的代码

js代码，写在父组件的

this.$store.commit('userNameChange','撒地方');

html代码

<P>{{$store.state.userName}}</P>

即使是用computed也是不能实时改变的，this.$store.commit写过在子组件和父组件测试，但效果都不理想，不知道代码是否有什么问题，基本上跨组件就不能实时改变了，特别是两个不同的兄弟组件之间的，想知道有什么办法能实现跨组件state值实时改变渲染出来

Answer 1

在此回复楼上：你的例子之前是试过的，在项目里也不行，后来新建个项目，重新写过一遍发现是可以了，store的代码和原先是一样的，却可以了，很郁闷，然后将原来的项目的store删了重写，居然可以了，更郁闷了，接着撤回代码，逐行重写运行，发现是

这两行的问题，重写代码一个符号都没变，就成功了。。。很神奇。。。

Answer 2

按理说vuex就是用来管理多个组件共享状态这种情况的，题主看下是不是哪里代码有什么问题呢，就上面贴的那些没法看出来哪里有问题。可以参考一下这个最简单的例子:https://jsfiddle.net/edx6gyp5/2/
先不考虑子组件，把父组件的实时改变实现。