下面再去新建一个页面 .. 放在 pages 目录的下面 .. 新建一个 demo 目录，里面添加一个 vuex.vue ..

设置组件的 template .. 一个 div .. 加上 container 类 .. 里面包装一个大标题 .. display-1 .. my-5 ... 标题文字暂时设置成 demo ..

Nuxt 会根据 pages 目录里面的文件的结构自动给我们生成对应的路由 ... 访问 pages/demo 下面的 vuex 组件 .. 路由地址应该是 demo/vuex ..

提示要在 demo.js 文件的结尾插入一个回车 .. 打开 demo.js ... 在文件结尾添加一个回车 .. 再保存一下文件 .. 回到浏览器 ..

现在页面上有个大标题，文字是 Demo ..

在组件里使用 store 里的数据可以这样 .. 先添加一组 script ... 在默认导出的东西里面 .. 添加一个 computed 属性 .. 一个对象 .. 里面是一些方法 .. 比如添加一个 pageName 方法 .. 方法 return 的东西是 this.$store .. 它是应用的 store .. 访问一下 store 里的 state .. 要使用的 state 是在 demo 里面 .. 名字是 pageName ..

下面替换一下大标题里的文字 .. 这里可以绑定输出一个 pageName .. 它是我们在组件的 computed 里面定义的一个东西 ..

回到 demo/vuex 这个页面预览一下 .. 页面上显示的这个大标题文字是来自 demo 这个 store 里的状态 ..

在这个 demo store 的 state 里面，再添加一个 count .. 让它先等于 0 ..

然后在 vuex 这个组件里面用一下 demo 里的 count 这个 state .. 在 computed 里面，添加一个 count 方法 .. 方法 return 的就是 this.$store.state.demo.count

修改一下组件的视图 .. 在标题的下面，添加一个 span ，上面加上几个 css 类 ..

绑定输出一个 count ... 前面可以再加上点静态文字 ..

回到浏览器 .. 提示让我删除掉 demo.js 里的一个逗号 .. 去掉 count 属性后面的这个逗号 ..

再回来预览一下 .. 页面上会显示一个小标签 .. 这里的数字 0 就是 Demo Store 里的 count 这个 State 的值 .. 现在 Demo 的 State 里面有个 count .. 还有一个 pageName ..