在vue项目中使用vuex 朱雀 2021-07-27 01:02 432阅读 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 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就可以在项目中使用了。 [clipboard.png]: /images/20210726/7c520f25824043899d5e26f683a5e8a0.png [clipboard.png 1]: /images/20210726/5172ad7ff65647c48dcccdba3c45fc3d.png [clipboard.png 2]: /images/20210726/3eced9bf26cf425597a5acbe7dea6cde.png
还没有评论,来说两句吧...