uniapp开发h5、微信小程序—配置Vuex步骤方法
注:开发工具使用的是HBuilder X1、在项目根目录中创建 store 文件夹,专门用来存放 vuex 相关的模块2、在 store 目录上鼠标右键,选择 新建 -> js文件,新建 store.js 文件3、在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象:// 1. 导入 Vue 和 Vueximport Vue from 'vue'import Vuex
·
-
注:开发工具使用的是
HBuilder X
- uniapp项目自带了vuex数据共享存储,所以不需要通过npm 进行安装了
1、在项目根目录中创建 store
文件夹,专门用来存放 vuex 相关的模块
2、在 store 目录上鼠标右键,选择 新建 -> js文件,新建 index.js
文件
3、在 index.js 中按照如下 4 个步骤初始化 Store 的实例对象,如下代码块:
// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)
// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
// TODO: store数据
state:{},
// TODO: 改变数据方法的集合
mutations:{},
// TODO: 异步请求
actions:{},
// TODO:挂载 store 模块
modules: {},
// TODO:其它插件配置,比如持久化插件等
plugins:[]
})
// 4. 向外共享 Store 的实例对象
export default store
3、在 main.js
中导入 store 实例对象并挂载到 Vue 的实例上,如下代码块:
// 1. 导入 store 的实例对象
import store from '@/store/index.js'
// 省略其它代码...
const app = new Vue({
...App,
// 2. 将 store 挂载到 Vue 实例上
store,
})
app.$mount()
按照以上方法完成基本配置,之后就可以全局使用了,快试试吧。
更多推荐
已为社区贡献2条内容
所有评论(0)