在vue项目中使用vuex

朱雀 2021-07-27 01:02 488阅读 0赞

## 首先在npm中安装vuex ##

npm install vuex --save

![clipboard.png][]

## 安装成功 ##

在vue项目目录下建立store文件夹

![clipboard.png][clipboard.png 1]

需要在项目main.js文件中引入store

import store from './store/index'
    
    省略代码.....
    
    new Vue({
      el: '#app',
      router,
      store,
      data:{},
      components: { App },
      template: '<App/>'
    })

接下来在store中，建立以下目录文件

![clipboard.png][clipboard.png 2]

## 在store的index.js中 ##

import Vue from 'vue'
    import Vuex from 'vuex'
    
    import logIn from './modules/logIn'
    
    Vue.use(Vuex);

引入vue和vuex，还有状态文件logIn.js

## 使用 ##

在使用的时候，要修改logIn.js中session\_id的值，可以这样改变

$this.$store.commit("logIn/getSession_id", res.data.session_id);

如果想获取session\_id的值，可以这样

computed:{
          session_id(){
            return this.$store.state.logIn.session_id; 
        },
      }

到此，vuex就可以在项目中使用了。

[clipboard.png]: /images/20210726/7c520f25824043899d5e26f683a5e8a0.png
[clipboard.png 1]: /images/20210726/5172ad7ff65647c48dcccdba3c45fc3d.png
[clipboard.png 2]: /images/20210726/3eced9bf26cf425597a5acbe7dea6cde.png