vue3记录-3.3(vuex)

苦夏木禾

已于 2022-05-06 17:25:41 修改

阅读量191

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

于 2021-04-14 15:15:39 首次发布

本文链接：https://blog.csdn.net/lhkuxia/article/details/115699616

版权

vue 专栏收录该内容

67 篇文章 11 订阅

订阅专栏

本文介绍了Vuex的安装步骤和基本结构，包括如何创建store，使用mutations、actions以及在组件中通过computed属性访问state和getter。同时展示了在组件内如何触发mutation和dispatch action。

摘要由CSDN通过智能技术生成

安装

指令

npm install vuex

基础结构

详细使用:官方介绍

import { createStore } from 'vuex'

export default createStore({
  state: {
  	count:1
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在组件或页面中使用

因为不使用this,所以vuex有些不同

import { computed } from 'vue'
import { useStore } from 'vuex'

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

    return {
      // 在 computed 函数中访问 state
      count: computed(() => store.state.count),

      // 在 computed 函数中访问 getter
      double: computed(() => store.getters.double)

	  // 使用 mutation
      increment: () => store.commit('increment'),

      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}