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

既然你想使用，那你肯定都懂，如何玩的

3、挂载组件

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

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

......

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

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>

这种方法，需要在getters，然后将你想要的数据提出来

作者有话

喜欢请留一个关注，如果能转发分享，那最好不过啦。更多源码、软件、爬坑知识等请关注微信公众号：干货助手，好饭不怕晚，现在关注正合适！