关于vuex的使用（一）

关于vuex的使用（一）

1. vuex 的安装

npm install vuex --save

然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

import Vue from "vue";
import Vuex from "vuex";
import admin from "./admin";
Vue.use(Vuex);
export default new Vuex.Store({
    modules:{
        admin
    }
})

接下来，在 main.js里面引入store，然后再全局注入，这样一来就可以在任何一个组件里面使用this.$store了

import store from './store'//引入store
import Login from "./Login"
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  store,//使用store
   components: { App ，Login}，
  template: '<App/>',
    //template: `<components :is="$store.state.admin.adminId?'App':'Login'"/>`判断是否存在登录id，存在即渲染页面，不存在则去登录界面
})

完成上秒步骤之后，你就可以使用this.$store.state.name了，在store文件夹下建立admin文件夹，admin文件夹里面建一个index.js文件，代码如下

import axios from "axios";
import Vue from "vue";
var vue=new Vue();
export default {
    state:{
       name:'demo'
    },
    mutations:{
        CHANGE_ADMININFO(state,data){
        //自定义方法，在组件中使用的时候则this.$store.commit('方法名')
           console.log(state,data);
        },
    },
    getters:{

    },
    actions:{
      //自定义方法，在组件中使用的时候则this.$store.dispach('方法名')
    }
}