在uniapp(VUE3)项目中引入并使用vuex
1、在项目中下载并安装vuex
npm install vuex --save
2、在根目录下创建文件/store/store.js
import {
createStore
} from 'vuex' //导入createStore构造函数
export default createStore({
state: { //Vuex的状态,实际上就是存数据的地方
location: {
lat: 0,
lng: 0
}
},
getters: { //提供获取Vux状态的方式, 注意在组件中调用时,以属性的方式被访问
getLocation(){
return state.location
}
},
mutations: { //提供直接操作Vuex的方法,注意mutations里的方法中不能有任何异步操做
setLocation(state, value) {
//第一个参数state为Vuex状态;第二个参数为commit函数传来的值
state.person.age += value
}
},
actions: { //提供通过mutations方法来简介操作Vuex的方法
ageGrow(context, value) {
//第一个参数context为上下文,提供一些方法;第二个参数为dispatch函数传来的值
context.commit('ageGrow', value)
}
},
})
3、在main.js中引入store.js
import App from './App'
import uviewPlus from '@/uni_modules/uview-plus' //引入 第三方组件 uview-plus
import store from '@/store/store.js'; //引入vuex
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(store)
return {
app
}
}
4、在项目中需要使用的地方引入调用
import {useStore} from 'vuex'
const store = useStore(); //获取store对象
let location= store.getters.getLocation ;