在vue项目中使用vuex

首先在npm中安装vuex

npm install vuex --save-dev

安装成功

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

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

import store from './store/index'

省略代码.....

new Vue({
  el: '#app',
  router,
  store,
  data:{},
  components: { App },
  template: '<App/>'
})

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

在store的index.js中

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

import logIn from './modules/logIn'

Vue.use(Vuex);

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

const state = {}
const actions = {}
const mutations = {}
const store = new Vuex.Store({
  modules: {
    logIn
  },
  actions,
  state,
  mutations,
})
export default store;

在logIn.js中写入需要的状态

// initial state
const state = {
  session_id: "",
  user: "",
  userImage:""
}

const getters = {}

const actions = {}

const mutations = {
  getSession_id(state, value) {
    state.session_id = value;
  },
  getUser(state, value) {
    state.usermobile = value;
  },
  getUserImage(state, value) {
    state.userImage = value;
  },
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

使用

在使用的时候，要修改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就可以在项目中使用了。