Quick 文档 0.2.3

store 全局状态

注入用户 Inject

  • 局部使用
// 引入全局状态
import { useGlobalStore } from '../../store';
export default {
  setup() {
    // 外挂写法
    //  const { useGlobalStore } = window.$plus.store;
    //调用 inject 函数时，通过指定的数据名称，获取到父级共享的数据
    const store = useGlobalStore();
    console.log('place:', JSON.stringify(store.user));
  },
};
1
2
3
4
5
6
7
8
9
10
11

vue 3.x 引入 createStore

  • main.js
import { createApp } from 'vue';
import App from './App.vue';

// 全局状态引入
import { createStore } from './store';
createApp(App).use(createStore()).mount('#app');
1
2
3
4
5
6

vue 2.x provideStore

  • main.js 无需引入 createStore

  • App.vue 进行全局注入 provideStore

<script>
// 全局注入
import { provideStore } from './store';
export default {
  provide: provideStore,
};
</script>
1
2
3
4
5
6
7

store 全局状态

  • src/store/index.js
import { inject } from '@/components/vue.api.js';
import { AppModel, UserModel } from './models.js';

/**
 * 全局关键字
 */
const StoreSymbol = 'global-store';
//const StoreSymbol = Symbol ? Symbol('global-store') : 'global-store';

/**
 * 全局应用对象
 */
const StateModel = { app: new AppModel(), user: new UserModel() };

/**
 * vue 3 创建全局状态
 * app.use(createStore())
 */
const createStore = () => {
  // console.log('createStore', 'Store');
  return {
    install(app) {
      // 初始化，用户对象
      // console.log('install Store', StateModel);

      // 全局绑定
      app.provide ? app.provide(StoreSymbol, StateModel) : '';
      //provide(StoreSymbol, StateModel);
    },
  };
};

/**
 * App.vue注册全局对象状态,vue 2.x
 * @returns
 */
const provideStore = () => {
  let data = {};
  data[StoreSymbol] = StateModel;
  return data;
};

/**
 * 取出全局状态
 */
const useGlobalStore = () => inject(StoreSymbol);

/**
 * 获取全局用户信息
 */
const useGlobalUser = () => {
  const store = useGlobalStore();
  return store.user || {};
};

/**
 * 获取全局应用信息
 */
const useGlobalApp = () => {
  const store = useGlobalStore();
  return store.app || {};
};

export {
  createStore,
  provideStore,
  StateModel,
  useGlobalStore,
  useGlobalUser,
  useGlobalApp,
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

Last Updated: