關於vue的面試題
摘要：
說實話，看了官方文件我並不清楚vuex到底是個什麼東西，通過例子，我知道如何使用後，我才慢慢理解一點。
我的理解就是：
為什麼會存在元件不能通訊？簡單粗暴的回答就是，變數的作用域導致的，vue的每一個元件都有自己的生命週期，都是獨立存在的個體。vuex就是在根元件建立一個...
說實話，看了官方文件我並不清楚vuex到底是個什麼東西，通過例子，我知道如何使用後，我才慢慢理解一點。
我的理解就是：
為什麼會存在元件不能通訊？簡單粗暴的回答就是，變數的作用域導致的，vue的每一個元件都有自己的生命週期，都是獨立存在的個體。vuex就是在根元件建立一個叫state的全域性變數，讓不同元件共享這個變數，並且定義了一系列方法和規範，也就是action、mutation等等，去統一觸發這個全域性變數也就是state。
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state () {
return {
monitorInfo: {
name: '',
description: ''
}
}
},
actions: {
updateMonitorInfo: ({commit}, info) => {
commit('UPDATE_MONITOR_INFO', info)
}
},
mutations: {
UPDATE_MONITOR_INFO: (state, info) => {
window.localStorage.setItem('monitorInfo', JSON.stringify(info))
state.monitorInfo = info
}
},
getters: {
monitorInfo: (state) => {
if (!state.monitorInfo.name) {
state.monitorInfo = JSON.parse(window.localStorage.getItem('monitorInfo'))
}
return state.monitorInfo
}
},
modules: {
}
})
export default store
<!-- list 兄弟元件的傳送方-->
<template>
</template>
<script>
import { mapActions } from 'vuex'
export default {
data () {
return {
}
},
computed: {
},
methods: {
...mapActions(['updateMonitorInfo']),
goNextPage (row, routerName) {
let monitorInfo = {
name: row.name,
serviceUrl: row.serviceUrl,
description: row.info.description
}
this.updateMonitorInfo(monitorInfo)
},
},
mounted () {
}
}
</script>
<!-- monitor.vue兄弟元件接收方-->
<template>
<span>{{monitorInfo.name}}</span>
<span>{{monitorInfo.description}}</span>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data () {
return {
}
},
computed: {
...mapGetters(['monitorInfo'])
},
methods: {
},
mounted () {
}
}
</script>