uni-app 框架中使用 vuex（store）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

uni-app 内置了 Vuex，不需要额外安装。

使用步骤如下：

1、项目根目录下新建 store/index.js

vue2 写法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {}, 
  mutations: {},
  actions: {},
  // ....
)

export default store
1
2
3
4
5
6
7
8
9
10
11
12

vue3写法

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  // ....
})

export default store
1
2
3
4
5
6
7
8
9
10

2、配置 main.js

vue2 写法

// 引入vuex，并且挂载到 vue 实例上
import store from './store/index.js'
Vue.prototype.$store = store
1
2
3

vue3写法

import Store from './store' // 在最顶部引入vuex

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Store) // use使用
  return {
    app
  }
}
// #endif
1
2
3
4
5
6
7
8
9
10
11
12

3、使用（示例）

// 使用store中的变量
this.$store.state.token


import { mapActions } from 'vuex'
export default {
  methods: {
    // 映射 this.Login() 为 this.$store.dispatch('Login')
    ...mapActions(['Login']),
  }
}
1
2
3
4
5
6
7
8
9
10
11