Vuex使用步骤

山治有个温暖的心

已于 2022-09-30 11:04:26 修改

阅读量138

点赞数

文章标签：前端 javascript ui

于 2022-09-29 16:10:49 首次发布

本文链接：https://blog.csdn.net/weixin_43502808/article/details/127108827

版权

本文介绍了Vuex的使用步骤，包括如何通过yarn安装Vuex，创建store目录和index.js文件，以及在main.js中配置。详细讲解了从state中获取数据的两种方式、通过mutations修改state值、利用getters处理计算数据，以及actions的异步修改state数据的方法。

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

yarn add vuex@3

在src下创建store文件夹，然后创建index.js文件

// 1. 引入Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将Vuex注册到Vue
Vue.use(Vuex)

// 3. 初始化一个全局的Store实例
const store = new Vuex.Store({
	// 在state中定义一个全局的变量数据，测试vuex是否配置成功
	state: {
		num: 1
	},
	getters: {},
	mutations: {},
	actions: {},
	modules: {}
})

// 4. 导出store实例对象
export default store

在main.js中进行配置

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

Vue.config.productionTip = false
// let a = 100

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

在需要传递数据的地方使用{ {$store.state.参数名}}去取到数据