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(新值)
}