vue的项目不能少了状态的集中管理,这是大型项目必备的!下面我们来引入这个插件!
yarn add vuex@next
然后在src/store/index.js
import { createStore } from "vuex";
export default createStore({
state() {
return {
age: 20,
};
},
mutations: {
addAge(state) {
state.age++;
},
},
actions: {
increment(context) {
context.commit("addAge");
},
},
});
然后main.js引入
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//注册状态
createApp(App).use(router).use(store).mount("#app");
import { useStore } from "vuex";
const store = useStore();
console.log(store, "useStore");
跟我们在vue2中就一样了。
<button @click="getMyAge">获取我的年龄</button>
const getMyAge = () => {
store.commit("addAge");
console.log(store.state.age, "age");
};
使用的方法就跟我们在vue2中一模一样了,那么久不多解释了!改变下思维方式就行!