在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)
		}
	}

效果：