如何使用 Vuex (萌新必看)
文章目录
- 前言
- 一、Vuex是什么？
- 二、Vuex的结构体（学完Vuex的基本属性在回来看）
- 三、如何安装Vuex
-
- 1.下载方法
- 2.引入方法
-
- (1) . 首先在src文件里新建一个store文件夹，在文件夹里新建一个index.js文件。
- (2) . 在main.js里引入它。
- 四、Vuex里有哪些方法，分别是干嘛，的要怎么使用。
-
-
- 1.state方法（它相当于vue中的data属性用来存储数据的）
- 2.mutations方法（他是用来修改 state 属性的 ）
- 3.actions方法（他是专门用来做异步操作的 使用时用 actions 方法来调用 mutations 方法）
- 4.getters 方法（它和 vue 的计算属性 computed 差不多）
- 5.modules（store的模块管理器）
-
- 总结
前言
提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考
一、Vuex是什么？
Vuex是一个专为vue.js应用程序开发的状态管理模式。
当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。
它通常用来存放一些公共的数据，他没有组件传参的局限性，每个组件都可以在Vuex里存取数据。
二、Vuex的结构体（学完Vuex的基本属性在回来看）
三、如何安装Vuex
1.下载方法
npm:
npm install vuex --save
yarn:
yarn add vuex
2.引入方法
(1) . 首先在src文件里新建一个store文件夹，在文件夹里新建一个index.js文件。
代码如下（示例）：
import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex) // 安装一下Vuex
export default new Vuex.Store({
// 把创建好的实例对象暴露出去
state: {
},
mutations: {
},
actions: {
},
getters:{
},
modules: {
}
})
(2) . 在main.js里引入它。
代码如下（示例）：
import Vue from 'vue'
import App from './App.vue'
import store from './store' // 引入刚刚写好的store文件夹下的index.js文件
Vue.config.productionTip = false
new Vue({
store, // 在Vue实例中注册一下
render: function (h) {
return h(App) }
}).$mount('#app')
四、Vuex里有哪些方法，分别是干嘛，的要怎么使用。
1.state方法（它相当于vue中的data属性用来存储数据的）
const store= new Vuex.Store({
state: {
name:"张三"
},
mutations: {
},
actions:{
},
getters: {
},
modules:{
}
})
如何调用state里面的数据
<template>
<div>
在页面直接输出
{
{$store.state.name}}
<br/>
<botton @click="aa">获取<button>
{
{name}}
div>
template>
<script>
export default {
data(){
name:""
},
methods:{
aa(){
this.name = this.$store.state.name
}
}
}
script>
2.mutations方法（他是用来修改 state 属性的 ）
！！！该方法不能执行异步操作
const store= new Vuex.Store({
state: {
name:"张三"
},
mutations: {
xiu(state,can){
// 第一个参数默认传输的是state 从第二个参数开始才是你传输的参
state.name = can
}
},
actions:{
},
getters: {
},
modules:{
}
})
如何调用mutations里面的方法
<template>
<div>
<botton @click="aa">获取<button>
{
{$store.state.name}}
div>
template>
<script>
export default {
methods:{
aa(){
// 使用 commit 方法来调用 vuex 里的 mutations 方法
this.$store.commit("xiu","李四")
// commit 方法里第一个参数是你要调用 mutations 的方法中的方法名(需要用引号包起来)
// 第二个参数是你要传输的参数
}
}
}
script>
3.actions方法（他是专门用来做异步操作的 使用时用 actions 方法来调用 mutations 方法）
const store= new Vuex.Store({
state: {
num:0
},
mutations: {
xiu(state,can){
// 第一个参数默认传输的是state 从第二个参数开始才是你传输的参
stata.num += can
}
},
actions:{
yibu(store,can){
// 第一个参数默认传输的是 store 实例 从第二个参数开始才是你传输的参
setTimeout(()=>{
store.commit("xiu",can)
},2000)
}
},
getters: {
},
modules:{
}
})
如何调用actions里面的方法
<template>
<div>
<botton @click="aa">获取<button>
{
{$store.state.num}}
div>
template>
<script>
export default {
methods:{
aa(){
// 使用 dispatch 方法来调用 vuex 里的 actions 方法
this.$store.dispatch("yibu",1)
// dispatch 方法里第一个参数是你要调用 actions 的方法中的方法名(需要用引号包起来)
// 第二个参数是你要传输的参数
}
}
}
script>
4.getters 方法（它和 vue 的计算属性 computed 差不多）
他会在它里面定义的方法中所依赖的属性发生改变时自动触发 需要 return 返回一个值
const store= new Vuex.Store({
state: {
num:0
},
mutations: {
xiu(state,can){
// 第一个参数默认传输的是state 从第二个参数开始才是你传输的参
stata.num += can
}
},
actions:{
},
getters: {
haha(a, b, c, d) {
console.log(a) // 全局 state
console.log(b) // gettes 下的全部方法
console.log(c) // 全局 state
console.log(d) // gettes 下的全部方法
}
},
modules:{
}
})
如何调用getters里面的方法
<template>
<div>
<botton @click="aa">获取<button>
{
{$store.getters.jisuan}}
div>
template>
5.modules（store的模块管理器）
当需要在 Vuex 里做大量代码操作时整个文件会变得特别乱，代码会变的不是很好梳理，而 Vuex 中的 modules 属性解决了这个问题Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
对于初学 Vuex 的人来说只需要先了解以上四种属性就可以，等完全熟练掌握后 可以进入下面这个链接去学习 modules 的使用方法
modules 的使用方法
总结
以上就是今天要讲的内容，本文仅仅简单介绍了Vuex的使用，而学会了 Vuex 的使用就可以让我们把数据在各个组件中互相传递。