脚本宝典收集整理的这篇文章主要介绍了

在vue项目中使用vuex

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

首先在npm中安装vuex

npm install vuex --save-dev

clipboard.png

安装成功

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

clipboard.png

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

import store from './store/index'

省略代码.....

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

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

clipboard.png

在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就可以在项目中使用了。

总结

以上是脚本宝典为你收集整理的

在vue项目中使用vuex

全部内容,希望文章能够帮你解决

在vue项目中使用vuex

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过