vue项目中将非父子组件之间共用的数据也可以通过vuex进行传值

书写vuex

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

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

export default new Vuex.Store({
  // 保存公共数据
  state: {
    name: ''
  },
  // vuex中公共数据在motations中设置
  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'， 新值)
}

方法二、通过映射

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