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)
}
}
效果: