在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文件下定义公共的数据以及方法函数，并且把它导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

1
2
3
4
5
6
7
8
9
10
11
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，测试如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <view class="content">
        {{this.$store.state.num}}
    </view>
</template>

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

效果：
在这里插入图片描述