为什么没有引入vuex,没有use他,也可以在vue实例对象里写store配置项

为什么没有引入vuex,没有use他,也可以在vue实例对象里写store配置项

img

  • 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7419601
  • 这篇博客也不错, 你可以看下源码分析,vue.use()的时候发生了什么,以初始化vuex为例
  • 除此之外, 这篇博客: vuex-store 的基本使用中的 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 帮助我们减少代码量

    • 四个方法
    1. mapState 将全局状态管理的state值映射到使用组件的计算属性
    2. mapGetters 将全局状态管理的getters值映射到使用组件的计算属性中
    1. mapMutations 将mutation的方法映射到methods里面
    2. mapActions 将actions里面的方映射到methods里面
    import {  mapState, mapGetters, mapMutations, mapActions }  from 'vuex'
    export default {
    	computed: {
    		//  可直接在实例中使用
    		...mapGetters(['doubleAge'])
    	},
    	methods: {
    		...mapMutations(['changeName', 'changeAge']),
    		change () {
    			// 可以使用this.changeName调用
    			this.changeName({ name: '张三丰' })
    		},
    	}
    }
    

    参考 Vuex

  • 您还可以看一下 董秀玲老师的Vue全家桶基础+实战高仿美团外卖App课程中的 Vuex下小节, 巩固相关知识点

以下内容部分参考ChatGPT模型:


是的,可以在Vue实例对象里写store配置项,但这并不是推荐的做法。使用Vuex能够更好地管理应用程序的状态,并提供了一些有用的特性,如状态快照和时间旅行。如果您的应用程序比较简单,并且您不需要管理复杂的状态,那么在Vue实例对象中写store配置项可能是可行的。例如:

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  store: {
    state: {
      todos: []
    },
    mutations: {
      addTodo(state, todo) {
        state.todos.push(todo);
      },
      removeTodo(state, index) {
        state.todos.splice(index, 1);
      }
    }
  }
})

在上面的代码中,我们使用了Vue的实例对象,并在其中定义了一些数据、方法和计算属性。我们还定义了一个store对象,其中包含了我们的应用程序状态和一些mutations来更改状态。在这种情况下,我们没有使用Vuex,但我们仍然能够管理应用程序的状态。

然而,对于更复杂的应用程序,我们仍然建议使用Vuex来管理状态。Vuex提供了一种清晰的方式来组织和维护应用程序的状态,并可以轻松地扩展到更大的应用程序。


如果我的建议对您有帮助、请点击采纳、祝您生活愉快