vue項目中將非父子組件之間共用的數(shù)據(jù)也可以通過vuex進行傳值

書寫vuex

根目錄下新建src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  // 保存公共數(shù)據(jù)
  state: {
    name: ''
  },
  // vuex中公共數(shù)據(jù)在motations中設(shè)置
  mutations: {
    mSetName (state, newName) {
      state.photo = newPhotoUrl
    }
})

在mian.js注冊全局

import Vue from 'vue'
import App from './App.vue'
// 引入vuex
import store from './store'

new Vue({
  store
  render: h => h(App)
}).$mount('#app')

其他組件獲取值

methods: {
this.$store.commit('mSetName')
}

其他組件獲取并改變值

方法一：直接操作

methods: {
this.$store.commit('mSetName'， 新值)
}

方法二、通過映射

  // 先導(dǎo)入vuex中的方法
import { mapMutations } from 'vuex'
  methods: {
  // 再追加或映射其他方法
    ...mapMutations(['mSetName']),
  // 使用
    this.mSetName(新值)
  }