在uniapp中使用vuex-已经被内置了

uni-app已经内置了vuex，所以只要正确引入就好了。

需要注意的是：

vuex中修改state的数据只能在mutations中直接修改，即使是在actions中也是通过context.commit(“xx”) 提交mutation的方式间接修改的,如果不按照规范来，你会发现state确实也能得到相应的修改，确实也能把新值响应到页面中，但是vue-Devtools工具捕获不到修改的动作，出了bug，如果想根据vue-Devtools工具找出问题来，极其不方便

1、在项目的根目录下，创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件

2、在该js文件下定义公共的数据以及方法函数，并且把它导出

import Vue from 'vue' import vuex from "vuex" Vue.use(vuex) export default new vuex.Store({ state:{ num:0 }, mutations:{ add(state){ state.num++ } }, })

3、在入口文件即项目根路径下的main.js挂载vuex

import Vue from 'vue' import App from './App' import store from "./store/index.js" Vue.config.productionTip = false const app = new Vue({ ...App, store }) app.$mount()

4、在单页面里使用vuex，测试如下

<template> <view class="content"> {{this.$store.state.num}} </view> </template> <script> export default { data() { return { } }, onReady() { //页面初次渲染完毕执行 setInterval(()=>{ this.$store.commit("add") },100) } }

效果：