uni-app中使用vuex方法

uni-app 中是有内置 vuex 的,可以直接使用
在项目目录下创建 store 文件夹,创建 index.js 文件,引入 vue 和 vuex

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
//后面 state,mutations 等可以在此页面写,也可以分到其他页面
export default new Vuex.Store({
	state:{},
	mutations:{},
	getters:{}
})

在 main.js 中引入 store

import store from "./store"
Vue.prototype.$store = store
//同时别忘记在这里把 store 添加上
const app = new Vue({
    store
}) 

在页面中加入计算属性(使用 state 的简单方法)

//在仅使用 vue 框架开发时,不需要添加计算属性,可以直接使用
<div>{{$store.state.zs.name}}</div>

<!-- 在使用uniapp时需要引入计算属性 -->
<div>{{state.zs.name}}</div>
computed: {
	state() {
		return this.$store.state;
	},
},
或者
<div>{{zs.name}}</div>
computed:{
	zs(){
		return this.$store.state.zs
	}
}

其他方法

在页面上引入
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
使用时
methods: {
	...mapMutations(["checkWxScopeUserInfo"]),	
}
回头补充...
posted @ 2020-12-24 13:41  静影  阅读(36)  评论(0)    收藏  举报