vue2怎么安装vuex

strong vuex class 映射 189 来源： 2024-10-21

vuex 安装步骤包括：安装 vuex 依赖项 npm install vuex --save。创建 vuex 存储，在 src 目录建立 store.js 文件并导入、使用 vuex。在 vue 实例中注入 vuex 存储，在 main.js 文件中导入并使用 store。在组件中使用 vuex，使用 mapstate、mapmutations 和 mapactions 辅助函数映射状态、突变和动作到组件。

如何安装 Vuex

步骤：

1. 安装 Vuex

npm install vuex --save

2. 创建 Vuex 存储

立即学习“前端免费学习笔记（深入）”；

在 src 目录下创建一个名为 store.js 的文件：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 你的状态对象
  },
  mutations: {
    // 你的突变对象
  },
  actions: {
    // 你的动作对象
  },
  getters: {
    // 你的获取器对象
  }
})

export default store

3. 在 Vue 实例中注入 Vuex 存储

在 main.js 文件中：

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

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

4. 在组件中使用 Vuex

映射状态：使用 mapState 辅助函数将 Vuex 状态映射到组件数据：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'stateVariable1',
      'stateVariable2'
    ])
  }
}

映射突变：使用 mapMutations 辅助函数将 Vuex 突变映射到组件方法：

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'mutation1',
      'mutation2'
    ])
  }
}

映射动作：使用 mapActions 辅助函数将 Vuex 动作映射到组件方法：

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'action1',
      'action2'
    ])
  }
}

上一篇：vue2怎么使用组合API

下一篇：vue2怎么监听数组

vue2怎么安装vuex

推荐文章

热门文章