使用轻量级的vue小项目不需要用到vuex状态管理，通过install方法定义全局的变量、函数

 

一：state.js （在vue项目中新建一个文件libs,然后创建一些全局的需要用到文件，例如router.js common.js  state.js）

import Vue from 'vue';
import common from "./common"; // 可以根据情况引入需要的
import Api from './api.js';  // 可以根据情况引入需要的
import axios from "axios"; // 可以根据情况引入需要的 
Vue.use(Api)  // 可以根据情况引入需要的
let baseUrl = common.shorthandUrlFn(); // 可以根据情况引入需要的

export default {
  install() {
    const state = new Vue({
        data: {
            posterInfo: '', // 定义了全局的变量posterInfo
        },  
        created() {
            //跟其它的vue页面一样写
            <!-- 例如在这里获取缓存token，执行不同操作 -->
            let token  = localStorage.getItem('token') || '';
        },
        methods: {
            <!-- 例如写获取token的请求接口 -->
            requestToken() {
                let postparams = common.paramsFilters(this.defaultJson);
                axios.post(`${baseUrl}/common/getBaseUserInfo`,qs.stringify(postparams) 
                ).then(({data}) => {})
            },
            <!-- 例如写获取全局海报的接口 -->
            getPoster() {
                axios.post(`${baseUrl}/common/getPoster`,qs.stringify({})).then(({data}) => {})
            },
        }
    });
    Vue.prototype.$state = state;
  },
};

二：main.js

import Vue from 'vue';
import state from '../libs/state'; // 添加全局的状态
Vue.use(state);

三：在vue页面中的使用

使用全局的变量
<wxCode v-if="$state.posterInfo"/>
方法中使用  this.$state.posterInfo
watch: {
    '$state.posterInfo'(newVal, oldVal) {
        if(newVal.list.length > 0) { 
          this.posterInfo = newVal;
        }
    },
}    


使用全局的函数
this.$state.requestToken();

 

四：知识点：

vue插件的install方法，通常为vue添加全局功能，一般是全局的方法或属性，添加全局的资源，添加指令、过滤器，添加vue实例方法，通过Vue.prototype