vuex获取数据

cmd窗口vue add vuex后出现store文件夹，在里面的index.js里面设置state属性，可以在视图页面home.vue文件中获取。

方法1：

//在项目当中引入router以后 就多了一个$route的对象，
//在项目当中引入vuex以后 就多了一个$store的对象
{{$store.state.属性名}}

方法2：

mapstate方法：

//mapState是vuex里面的一个对象 包含了vuex.state里面所有的属性
<script>
import {mapState} from 'vuex'
export default{
computed: {
//...es6中的展开运算符
...mapState(['number','friend','fond','responseData'])
}
  }
</script>
//home.vue
//vuex创建完毕以后 也可以通过mapState这种方式来直接使用vuex.state的值
{{number}} |
{{friend}} |
{{fond}} |
{{responseData}}

方法3：

我们也可以自定义属性 然后绑定vuex.state里面的值

 {{selfNumber}}
<script>
export default{
computed: {
    selfNumber(){
      return this.$store.state.number
    },
}
}
</script>

方法4：

<input type="text" v-model="newMessage">
<h1>{{newMessage}}</h1>
<script>
export default{
computed: {
     newMessage:{
      get(){
        return  this.$store.state.fond
      },
      set(value){
        this.setFond(value)
        // this.$store.commit('setFond',value)
      }
    }
}
}
</script>