导航：首页 > 开发技术 >

怎么用vuex

发表于：2025-11-18 作者：千家信息网编辑

千家信息网最后更新 2025年11月18日，这篇文章给大家分享的是有关怎么用vuex的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。首先贴上官方文档，https://vuex.vuejs.org/guide/modul

千家信息网最后更新 2025年11月18日怎么用vuex

这篇文章给大家分享的是有关怎么用vuex的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

首先贴上官方文档，
https://vuex.vuejs.org/guide/modules.html

 新建项目就不多说了，用vue-cli ，在新建项目的选项上选择了typescript 和class 类的方式，这种形式也和react 的class 方式是很像的，然后一直下一步下一步，项目就给你自动创建成功了，很吊有没有。

根据提示运行 npm run serve 熟悉的界面就来了：

这些没必要说了，下面进入正题，其实已经自动整合了vuex 并且创建了 store.ts

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {    name: 'Hello Word',    count: 1,    users: [        { name: '×××', age: 18 },        { name: '小刘', age: 18 },        { name: '小王', age: 11 },        { name: '小张', age: 18 },        { name: '小鹏', age: 18 },        { name: '小强', age: 19 },        { name: '小子', age: 20 },    ]},mutations: {    increment(state, payload) {        // mutate state        state.count += payload.count;    },},getters: {    getAges: (state) => {        return state.users.filter(user => {            return user.age > 18;        });    }},actions: {},});

(稍微添加了点东西)；那么我们在页面上怎么用他呢？只需要引入 store.ts 然后 store.state 就可以获取state了以HelloWorld.vue 为例

getters 是对state的一些过滤操作，如果想要改变state 就执行store.commit 方法

第一个参数是mutations名称在store的 mutations 下定义。

第二个参数是传递的参数类似react-redux 的 actions。

现在都是在一个store文件上定义所有state ，当项目越来越大的时候如果还采用这种方式，那么store必定越来越大，有没有什么办法优化呢？当然有那就是Modules
官网例子

新建一个store 取名 combineStore.ts：

 import Vue from 'vue';import Vuex from 'vuex';const moduleA = {    state: { name: "moduleA" },    mutations: {},    actions: {},    getters: {}}const moduleB = {    state: { name: "moduleB" },    mutations: {},    actions: {}}const Combilestore = new Vuex.Store({    modules: {        a: moduleA,        b: moduleB    }})// store.state.a // -> `moduleA`'s state// store.state.b // -> `moduleB`'s stateexport default Combilestore;

在组件中引入就可以用了：

import Combilestore from "../combineStore";

用法和普通store 并无区别

还可以整合elementUi

main.ts

import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store';import './registerServiceWorker';//引入elementuiimport ElementUI from 'element-ui';//引入样式import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)Vue.config.productionTip = false;new Vue({  router,  store,  render: (h) => h(App),}).$mount('#app');

感谢各位的阅读！关于"怎么用vuex"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

很赞哦！