uniapp写小程序，如何使用vuex?-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp写小程序，如何使用vuex?。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

由于在uniapp里面内置vuex插件，故用起来比较简单的，不同于传统的vue项目，也不需要你使用下面的指令进行安装

npm install vuex --save

1、新建文件

在项目根目录下面新建文件store/index.js

2、注册插件

在上述文件中，添加代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  ......
})

export default store

既然你想使用，那你肯定都懂，如何玩的
uniapp vuex 小程序,前端,小程序,uni-app,小程序,vue.js

3、挂载组件

在mian.js文件中，将vuex挂载到Vue中

import store from '@/store/index.js'

......

const app = new Vue({
	...App,
	store
})

uniapp vuex 小程序,前端,小程序,uni-app,小程序,vue.js

4、使用

①直接使用

<h2>{{this.$store.state.xxxx}}</h2>

②mounted中去取用vuex中的数据

<h2>{{xxxx}}</h2>
mounted() {
   this.xxxx= this.$store.state.xxxx
},

③使用computed去取vuex中的数据

<h2>{{xxxx}}</h2>

<script>
export default {
    computed: {
        xxxx(){ return this.$store.state.xxxx}
    }
}
</script>

④mapState获取

<h2>{{xxxx}}</h2>
<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
            }
        },
        computed: { //computed中注册
            ...mapState(['xxxx'])
        }
    }
</script>

⑤mapGetters获取

<h2>{{xxxx}}</h2>
<script>
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {
            }
        },
        computed: { //computed中注册
            ...mapGetters(['xxxx'])
        }
    }
</script>