vue组件通信,vue中vuex的使用

1.安装vuex

        npm install vuex -s

        vue组件通信,vue中vuex的使用_第1张图片

2.在main.js中配置

        vue组件通信,vue中vuex的使用_第2张图片

别忘记将store挂载到vue实例上,我当初就在这里踩了坑,弄了好长时间

3.构建核心仓库    

        在src目录下,创建vuex文件夹,在vuex文件夹下创建stroe.js

        vue组件通信,vue中vuex的使用_第3张图片

        store代码如下

        vue组件通信,vue中vuex的使用_第4张图片

4.在组件中获取状态

           vue组件通信,vue中vuex的使用_第5张图片

    到这里我们就可以获取到状态了

5.如何改变状态

    vue组件通信,vue中vuex的使用_第6张图片

    this.$store.state.author = state

   我这里想要实现的效果就是,首页返回上一层按钮不显示,新闻页面显示返回上一层

    vue组件通信,vue中vuex的使用_第7张图片

vue组件通信,vue中vuex的使用_第8张图片


你可能感兴趣的:(vue.js,javascript,vuex,vue,vue组件通信)