Ⅰ. Introduction to Vuex:
1. What is Vuex?
Answer: VuexIt is a state management mode specially developed for Vue.jsapplications ;
and the so-called state refers to: the data maintained in the component);
(in short: it is state management, which solves complex component data communication and state sharing;)
2. Explanation of the legend of Vuex:
First, the understanding of Vue Components:
Vue Components refers to: one 组件(such as: compA.vue);
Second, the understanding of State:
State refers to: 存放数据(the data is finally displayed (render) in the template (view) of the component);
Third, the understanding of Mutations:
Mutations refers to: used 存放修改方法(and synchronized);
and Vue Componentscan be passed committhrough 修改 Mutations;
Fourth, the understanding of Actions:
Actions refers to: used 放异步操作(such as: ajax request);
and asynchronous requests Vue Componentsthat can be dispatcheddispatch ; at the same time: Action can directly obtain the interface: Backend API, or modify Mutations through Commit to modify State data ;Action
3. The configuration process of Vuex:
First, in the process of selecting and downloading the Vuex version:
Note: Vue2it is Vuex3相匹配with , but withVue3 ;Vuex4 相匹配
Second, open the terminal and enter the command:
npm i vuex@3
Ⅱ. How to introduce and use Vuex:
1. vue-cliCreate
src2. Create a storefolder under and create index.jsa file ;
First, the built folder is as follows:
Second, the code introducedindex.js inside is:vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 注意：一定要用 Vue.use() 注册一下；
const store = new Vuex.Store({
/* 此时的 Vuex.Store 就是一个构造函数(即：相当于一个实例); */
// 定义状态的地方;
state: {
num: 1,
school: {
name: 'xuexiqianduan',
age: 26
}
},
})
export default store
// 此时是导出 store 文件，便于挂载；
3. To mount it in main.jsthe file :
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store, /* 挂载到实例完成后，在 vue 项目的任何地方就都可以使用 store */
render: h => h(App),
}).$mount('#app')
4. Then use App.vuein ;
Ⅲ. Example analysis of the process of using state in App.vue:
1. Method 1: $store.state.numGet ;
First, the code App.vueof is:
<template>
<div id="app">
<h1>真实用法：展示Vuex中的State</h1>
<p>方式一: num: {
{
$store.state.num }}</p>
<!-- '$store'就是指：拿到已经挂载到实例上的 store 下的 index.js 的内容； -->
</div>
</template>
<script>
export default {
computed: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Second, the display effect of the page is:
Third, at this index.jstime numthe value of in is:
(that is: the value of index.jsin num;)
2. Method 2: {
{ num }}Get ;
First, the code App.vueof is:
<template>
<div id="app">
<h1>真实用法：展示Vuex中的State</h1>
<p>方式二: num: {
{
num }}</p>
</div>
</template>
<script>
export default {
computed: {
num() {
return this.$store.state.num;
},
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Second, the display effect of the page is:
Third, at this index.jstime numthe value of in is:
(that is: the value of index.jsin num;)
3. Method 3: {
{ num }} {
{school.name}}Get ;
First, the code App.vueof is:
<template>
<div id="app">
<h1>真实用法：展示Vuex中的State</h1>
<p>方式三：num: {
{
num }} school: {
{
school.name }}</p>
</div>
</template>
<script>
import {
mapState} from 'vuex'
export default {
computed: {
...mapState(['num','school']),
// 该函数内部运行的返回值大致为：{num: () => this.$store.state.num, school: () => this.$store.state.school}
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Second, the display effect of the page is:
Third, at this index.jstime numthe value of in is:
(that is: the value of index.jsin num;)
Ⅳ. Summary:
First, where there is something wrong or inappropriate, please give me some pointers and exchanges!
Second, if you are interested, you can pay more attention to this column (Vue (Vue2+Vue3) interview must-have column):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482