組件之間的數據傳遞--Vuex

安裝Vuex：

npm install Vuex -S

在main.js中引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

創建store.js

在 src 目錄下創建 vuex ，在文件夾vuex中創建store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
         author : 'hello'
    }
})

export default store

 

映射到組件：

<template>
  <footer class="footer">
    <p>
      Copyright&nbsp;&copy;&nbsp;{{author}} - 2016 All rights reserved
    </p>
  </footer>
</template>

<script>
export default{
    name: '....',
    comptude:{
        author(){
            return this.$store.state.author
        }    
    }
}
</script>

 

在其他組件中修改狀態：

 

<template>
    <div>
        <input type='text' v-model='text' @change='getAuthor'>
    </div>
</template>

<script>
export default {
    data(){
        return{ text:'' }
    },
    methods:getAuthor:function(){
        this.$store.state.author = this.text
    }
}
</script>

 

這樣就實現了input狀態發生改變時，author的值也跟着發生改變，達到了跨組件修改值的方法。

 

官方寫法

store.js：

 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
    state:{ author : 'hello' },
    mutations:{
        newAuthor(state,msg){
            state.author = msg
        }
    }
})

export default store

 

然后在組件內修改setAuthor方法：

methods:{
    setAuthor:function(){
        this.$store.commit('newAuthor',this.text)
    }
}