Vue项目配置Vuex

weixin_45786889

于 2021-07-10 15:23:31 发布

阅读量245

点赞数

分类专栏：初始化Vue2项目文章标签： vue npm vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45786889/article/details/118635611

版权

初始化Vue2项目专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装和配置Vuex，包括创建store目录、编写index.js文件、在main.js中引入并使用store，以及如何修改和获取状态。此外，还提供了设置和获取token的示例，方便日后查阅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置Vuex与使用

安装Vuex依赖

首先要确定一下你是否安装过Vuex依赖，没有的话先npm install一下

npm install vuex --save

配置Vuex

1、在src目录下新建文件夹，名字叫store，并在store文件夹下新建index.js文件
在这里插入图片描述
2、在index.js中输入如下代码，这里举了个设置与获取token的例子

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        token: "",
    },
    mutations:{
        saveToken(state,token){
            state.token = token;
        }
    }
})

3、在main.js文件中加入如下代码

import store from './store/index';

并在new Vue下增加store

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

使用Vuex

1、修改状态
调用刚刚写的index.js中的函数，来设置token的值

this.$store.commit('saveToken',this.token)

第一个参数为函数名，第二个参数为这个函数接收的参数。

2、获取属性

在全局都可以获取vuex文件中设置好的属性，获取方法：

this.$store.state.token

备注

文章用于记录个人学习，方便日后配置。