由于uni-app已经内置了vuex,所以只要正确引入就好了。
1、在项目的根目录下,**创建一个名为store的文件夹**然后在该文件夹下创建一个**index.js**的js文件
2、在该js文件下定义公共的数据以及方法函数,并且把它导出
Jsx
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {}
})
export default store
3、在入口文件即:**main.js**挂载vuex
Jsx
import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
//挂载
store
})
app.$mount()
引入store中isLogin和orderType
Code
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
isLogin:false,
orderType: 'takein'
},
mutations: {
SET_ORDERTYPE(state,type) {
state.orderType = type
}
},
actions: {}
})
export default store
项目中
第一步 script中引入
import {mapState} from ‘vuex’
Xml
在计算属性中引入
...mapState([ 'isLogin', 'orderType'])
takein() {
this.$store.commit('SET_ORDER_TYPE', 'takein')
uni.switchTab({
url: '/pages/menu/menu'
})
},