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>