在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同
首先npm install vuex --save引入vuex
在main.js里引入store模块
import store from "./store";
const app = createApp(App)
app.use(store)
创建一个store文件夹,在index.js文件写入
import { createStore } from "vuex";
import mask from "./modul/mask";//引入模块拆分化之后的一个文件夹,每一个模块都可以有自己的state,mutations,actions,modules
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {
mask,
},
});
接下来我们就可以在我们定义的一个模块mask里定义我们的数据,以及改变数据的方法
export default {
namespaced: true,//开启命名空间,之后在不同页面中引入getter、actions、mutations时,需要加上所
属的模块名
state: {//定义一个数据
audit: false,
},
mutations: {//store中更改state数据状态的唯一方法(mutations必须是同步函数)
disaf(state) {
state.audit = true;//改变数据的方法,方法名为audit
},
disaf1(state) {
state.audit = false;
},
},
actions: {},//action: 包含异步操作(请求API方法)、回调函数提交mutaions更改state数据状态,使
之可以异步。
getter:{},//getter:从基本数据(state)派生的数据,相当于state的计算属性
modules: {},//module: 模块化Vuex(将store分割成不同的模块)
};
接下来在页面中使用
引入vuex
import { useStore } from "vuex";
在setup里实例化
const store = useStore();
然后可以通过store.commit来调取方法
store.commit("mask/disaf");
在html里通过
$store.state.mask.audit
来调取数据