如何在Vue项目中使用vuex

更新时间：2023年01月23日 11:52:10 作者：The..Fuir

这篇文章主要介绍了如何在Vue项目中使用vuex问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

在Vue项目中使用vuex

在一个vue项目中使用vuex，需要根据项目来源分两种情况：

第一种情况：在老项目中使用。先额外安装vuex包，然后在配置。
第二种情况：在新项目中使用。在配置vue-cli中创建项目时，就可以直接选中vuex项，这样就不用做任何配置了（脚手架会自动帮我们完成的）。

具体如下图示：

这里我们主要说明第一种情况，在一个老项目中如何使用vuex，步骤如下：

1.首先安装vuex包，安装完之后开始配置

2.在src目录下创建一个文件夹store，在store文件夹中新建一个index.js文件

3.创建Vuex.store实例：index.js中进行如下配置：

4.向Vue实例注入store：main.js中进行如下配置：

5.配置完后就可以在任意组件中使用了

在任意组件中，通过this.$store.state 来获取公共数据，在模板中，则可以省略this而直接写成： {{$store.state.属性名}}

一、安装vuex

npm install vuex --save

二、创建store

在项目src目录下创建store目录，在store目录中创建index.js文件。

写入一下内容：

import Vue from 'vue'
import Vuex from 'vuex'
 
// 挂在Vuex
Vue.use(Vuex)
 
// 创建Vuex对象
const store = new Vuex.Store({
    state:{
        // 存放的键值对就是所要管理的状态
        // 以key：value为例
        key : value,
    }，
    mutations:{
        setKey(state, payload) {
            state.key = payload;
        }
    }
})
 
export default store

三、挂载store

在main.js中，添加代码：

import store from './store'
 
new Vue({
  el: '#app',
  router,
  store: store, //store:store 和 router一样，将我们创建的Vuex实例挂载到这个vue实例中
  components: { App },
  template: '<App/>'
})

四、在组件中使用

将需要使用的值写在computed中：

computed：{
    key() {
        return this.$store.state.key;
    }
}

如果在组件中使用v-model绑定computed中的值，需要在computed中定义set方法，如下：

computed:{
    key:{
        get(){
            return this.$store.state.key;
        },
        set(val){
            this.$store.commit('setKey', val);
        }
    }
}

五、在Vue组件中监听Vuex

在Vue组件中监听Vuex：

通过computed获取vuex中的状态值。
通过watch监听值的改变。

computed:{
    key(){
        return this.$store.state.key;
    }
},
watch:{
    key(val) {
        // 要做的操作
    }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

浅谈Vue响应式(数组变异方法)
这篇文章主要介绍了浅谈Vue响应式(数组变异方法)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue.js $refs用法案例详解
这篇文章主要介绍了Vue.js $refs用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
vue如何实现角色权限的控制
关于角色与权限控制,通常是分为两大类,一种是菜单权限,一种是操作权限,本文将深入探讨如何通过 Vue 实现角色权限控制,特别是基于按钮级别的权限控制,需要的可以了解下
2025-02-02
详解Vue中的Props与Data细微差别
这篇文章主要介绍了详解Vue中的Props与Data细微差别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
Element-UI el-table对循环产生的空白列赋默认值方式
这篇文章主要介绍了Element-UI el-table对循环产生的空白列赋默认值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue3中的Fragment使用方法详解
Fragment 是 Vue 3 中的新特性,允许一个组件模板返回多个根节点,与传统方式不同,不再需要一个额外的 DOM 元素来包裹所有内容,本文将详细介绍 Fragment 的概念、使用场景、优点以及可能遇到的问题,需要的朋友可以参考下
2024-08-08
vue浏览器返回监听的具体步骤
这篇文章主要给大家介绍了关于vue浏览器返回监听的具体步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
ant design中upload组件上传大文件,显示进度条进度的实例
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue3路由新玩法useRoute和useRouter详解
这篇文章主要介绍了vue3路由新玩法useRoute和useRouter，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue项目中input输入框输入不了值问题及解决
这篇文章主要介绍了vue项目中input输入框输入不了值问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04