Vue项目--集成vuex

1.安装

npm install vuex --save-dev

2.在scr下键store文件夹

vuex.jpeg

3.建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import logIn from './modules/logIn'
Vue.use(Vuex);
const state = {
    //1
    author: ''
}
const actions = {}
const mutations = {
    setAuthor(state, value){
        state.author = value;
    }
}
const store = new Vuex.Store({
    modules: {
        //2
        logIn,
    },
    actions,
    state,
    mutations,
})
export default store;

4.logIn.js

// 2
const state = {
    session_id: ''
}
const getters = {}
const actions = {}
const mutations = {
    setSessionId(state, value) {
        state.session_id = value;
    }
}
export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

5.在main.js 中引入store

import Vue from 'vue';
import store from './store/index';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store, 
  router,
  components: { App },
  template: '<App/>'
});

6.在页面改变值

//1
this.$store.commit('setAuthor', 'author2');
//2
this.$store.commit('logIn/setSessionId', '22222');

7.获取值

    computed:{
        session_id(){
            return this.$store.state.logIn.session_id; 
        },
    },
    mounted() {
        //1
        console.log(this.session_id);
        //2
        console.log(this.$store.state.author);
    },