大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
前言
每一个 Vuex
应用的核心就是 store
(仓库)。store
基本上就是一个容器,它包含着你的应用中大部分的状态 (state)
。Vuex
和单纯的全局对象有以下两点不同:
Vuex
的状态存储是响应式的。当Vue
组件从store
中读取状态的时候,若store
中的状态发生变化,那么相应的组件也会相应地得到高效更新。- 你不能直接改变
store
中的状态。改变store
中的状态的唯一途径就是显式地提交(commit) mutation
。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
Vuex的安装
安装通过NPM
命令:
npm install vuex --save
在一个模块化的打包系统中,您必须显式地通过 Vue.use()
来安装 Vuex
:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
如果我们使用vue-cli
创建项目并选择配置了Vuex
,那么项目会自动给我们配置好这些
Vuex的简单示例
安装 Vuex
之后,我们需要在某个地方存放我们的Vuex
代码
这里我们先创建一个文件夹store
,并且在其中创建一个index.js
文件,在文件中写入如下代码
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 1000,
},
mutations: {
increment(state) {
state.counter++;
},
decrement(state) {
state.counter--;
},
},
});
其次,我们让所有的Vue
组件都可以使用这个store
对象,来到main.js
文件中,导入store
对象,并且放在new Vue
中,这样其他Vue
组件中,我们就可以通过this.$store
的方式,获取到这个store
对象
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
new Vue({
store,
render: (h) => h(App),
}).$mount("#app");
然后在App.vue
中写入如下代码:
<template>
<div id="app">
<h2>{{ $store.state.counter }}</h2>
<button @click="addMethod">+</button>
<button @click="reduce">-</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
addMethod() {
this.$store.commit("increment");
},
reduce() {
this.$store.commit("decrement");
},
},
};
</script>
<style lang="scss"></style>
Vuex使用步骤总结
-
1.提取一个公共的
store
对象,用于保存多个组件中共享的状态 -
2.将
store
对象放置在new Vue
对象中,这样可以保证在所有的组件中都可以用到 -
3.在其他组件中使用
store
对象中保存的状态即可- 通过
this.$store.state
属性的方式来访问状态 - 通过
this.$store.commit("mutations中的方法")
来修改状态
- 通过
-
注意事项
- 我们是通过提交
mutations
的方式,而非直接改变store.state.counter
- 这是因为
Vuex
可以更明显的追踪状态的变化,所以不要直接改变store.state.counter
的值
- 我们是通过提交
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165717.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...