vue2和vue3中的vuex使用方法

寻缘千鹤
756 阅读5分钟

vue2中如何使用：

  1. 安装Vuex

在Vue.js项目中使用Vuex，需要首先安装Vuex。可以使用npm或yarn安装它。在终端运行以下命令：

npm install vuex --save
  1. 创建Vuex store

在项目中创建一个新的js文件，用于定义Vuex store。例如，在src目录下创建store.js文件，并添加以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => {
      return state.count
    }
  }
})

在上面的代码中，我们首先导入Vue和Vuex。接下来，我们定义了一个名为“state”的对象，其中包含我们的共享状态，它只包含一个名为“count”的变量，其默认值为0。我们还定义了两个名为“increment”和“decrement”的mutation，它们分别将count增加和减少1。我们还定义了一个名为“incrementAsync”的action，它在1秒后调用“increment”mutation。最后，我们定义了一个名为“getCount”的getter，它返回count的当前值。

  1. 将store注入到Vue应用程序中

现在，我们需要在我们的Vue.js应用程序中使用Vuex。我们可以将store注入到我们的应用程序中，这样我们就可以在我们的组件中访问它。我们在main.js中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

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

在上面的代码中，我们导入store.js文件，并在Vue实例中使用store选项，将store注入到我们的应用程序中。这样，我们就可以在我们的组件中使用Vuex。

  1. 在组件中使用Vuex

现在我们已经设置了Vuex store并将其注入到我们的Vue应用程序中，我们可以在组件中使用它。我们可以使用以下代码在组件中访问store中的状态：

<template>
  <div>
    <h2>Count: {{ count }}</h2>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {

vue3中如何使用：

  1. 安装Vue3

使用Vue CLI可以轻松创建Vue3项目。在终端中运行以下命令：

npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve
  1. 创建Vue3组件

在Vue3中，组件使用defineComponent函数定义。例如，在src/components/HelloWorld.vue文件中，我们可以创建以下组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const msg = 'Welcome to Your Vue.js App'
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      msg,
      count,
      increment
    }
  }
})
</script>

在上面的代码中，我们首先导入Vue3的defineComponent函数和ref函数。我们定义了一个名为HelloWorld的组件，它包含一个计数器，点击按钮可以增加计数器的值。在组件的setup函数中，我们使用ref函数来创建一个响应式计数器。我们还定义了一个increment函数，该函数将增加计数器的值。最后，我们将msg、count和increment作为对象返回，这些对象将在模板中使用。

  1. 在Vue应用程序中使用组件

现在，我们已经创建了Vue3组件，并可以将其用于我们的Vue应用程序中。我们可以在App.vue文件中添加以下代码：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

在上面的代码中，我们导入了我们的HelloWorld组件，并在Vue应用程序的components选项中注册它。现在，我们就可以在应用程序中使用HelloWorld组件了。

  1. 运行Vue应用程序

现在，我们已经创建了Vue3组件并将其用于我们的Vue应用程序中，我们可以使用以下命令在本地运行Vue应用程序： npm run serve

Vue2和Vue3之间的一些主要区别

  1. 性能优化

Vue3在性能方面进行了大量的优化和改进，相对于Vue2，它具有更好的性能和更小的文件大小。Vue3引入了一个新的响应式系统，使得响应式数据的变更比Vue2更快。Vue3还引入了新的编译器，可以生成更小、更快的代码。

  1. Composition API

Vue3引入了一个新的Composition API，可以更好地组织和重用组件代码。Composition API使用函数而不是选项对象来组织组件代码，这使得代码更易于理解和维护。在Vue2中，组件代码通常是在不同的选项对象中定义的，这使得代码难以组织和重用。

  1. Template语法改进

Vue3引入了一些新的模板语法，包括可选的模板标签、模板片段和多个根节点。这使得模板更加灵活，可以更好地支持组件的嵌套和复杂性。

  1. Typescript支持

Vue3对TypeScript的支持更加完善。Vue3的代码本身就是使用TypeScript编写的，并且Vue3提供了更好的TypeScript类型支持，可以使开发者更轻松地使用TypeScript编写Vue应用程序。

总的来说，Vue3相对于Vue2具有更好的性能、更好的开发体验和更好的组织代码的方式。如果你要开始一个新的Vue项目，Vue3是一个更好的选择。如果你已经在使用Vue2并且想升级到Vue3，你需要注意一些Vue3中的语法和API的变化，并且需要做一些迁移工作。

两者在使用vuex的时候有什么区别

Vue2和Vue3在使用Vuex时有一些区别，主要是在API的变化和使用上的差异。

  1. 在Vue3中，使用Vuex需要安装新的Vuex版本，即vuex@next，而不是Vue2中使用的vuex。Vuex@next是专门为Vue3设计的，具有更好的性能和更好的类型支持。
  2. 在Vue2中，使用Vuex时需要在Vue实例中引入Vuex并将其添加到Vue的选项中，如下所示：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // ...
})

new Vue({
  store,
  // ...
})

在Vue3中，使用Vuex时不需要使用Vue.use0方法来安装Vuex，而是可以在应用程序的根 组件中直接引入并创建Vuex store，如下所示：

import { createApp } from 'vue'
import { createStore } from 'vuex'

const store = createStore({
  // ...
})

createApp({
  // ...
}).use(store).mount('#app')
  1. 在Vue2中，使用Vuex时可以使用mapState、 mapMutations、 mapGetters和mapActions 这些辅助函数来简化代码。在Vue3中，这些辅助函数不再建议使用。取而代之的是使用新 的辅助函数useStore来获取Vuex store实例，以及使用新的reactive和computed AP!来处 理响应式数据和计算属性，如下所示：
import { useStore } from 'vuex'
import { reactive, computed } from 'vue'

export default {
  setup() {
    const store = useStore()

    const state = reactive({
      count: computed(() => store.state.count)
    })

    const increment = () => {
      store.commit('increment')
    }

    return {
      state,
      increment
    }
  }
}

总的来说，虽然Vue2和Vue3在使用Vuex时有一些不同，但主要的思想和原则仍然相同。使用 Vuex来管理应用程序的状态和数据，可以使得应用程序更加可靠、可维护和可扩展。

avatar
文章
阅读
粉丝