Table of contents
1. Overview of Vuex
Goal: Clarify what Vuex is, application scenarios and advantages
1.What is
Vuex is a state management tool for Vue, and state is data.
In plain English: Vuex is a plug-in that can help us manage Vue's common data (data shared by multiple components). For example: shopping cart data personal information number
2.Usage scenarios
-
A certain state is used in many components (personal information)
-
Multiple components jointly maintain one data (shopping cart)
3. Advantages
- Jointly maintain one data and centralize data management
- Responsive changes
- Simple operation (vuex provides some auxiliary functions)
4. Note:
Official text:
- Not all scenarios are suitable for vuex, use vuex only when necessary
- After using vuex, more concepts in the framework will be added, increasing the complexity of the project (data operation is more convenient, and the data flow is clearer)
Vuex is like "myopia glasses", you will naturally know when you need to use it~
2. Requirements: Multiple components share data
Goal: Create a project based on scaffolding and build a vuex multi-component data sharing environment
The effect is that three components share one data:
- Any component can modify data
- The data of the three components is synchronized
1.Create project
vue create vuex-demo
2. Create three components, the directory is as follows
|-components
|--Son1.vue
|--Son2.vue
|-App.vue
3. The source code is as follows
App.vueIntroduce the two sub-components Son1 and Son2 into the entry component
<template>
<div id="app">
<h1>根组件</h1>
<input type="text">
<Son1></Son1>
<hr>
<Son2></Son2>
</div>
</template>
<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
export default {
name: 'app',
data: function () {
return {
}
},
components: {
Son1,
Son2
}
}
</script>
<style>
#app {
width: 600px;
margin: 20px auto;
border: 3px solid #ccc;
border-radius: 3px;
padding: 10px;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
Son1.vue
<template>
<div class="box">
<h2>Son1 子组件</h2>
从vuex中获取的值: <label></label>
<br>
<button>值 + 1</button>
</div>
</template>
<script>
export default {
name: 'Son1Com'
}
</script>
<style lang="css" scoped>
.box{
border: 3px solid #ccc;
width: 400px;
padding: 10px;
margin: 20px;
}
h2 {
margin-top: 10px;
}
</style>
Son2.vue
<template>
<div class="box">
<h2>Son2 子组件</h2>
从vuex中获取的值:<label></label>
<br />
<button>值 - 1</button>
</div>
</template>
<script>
export default {
name: 'Son2Com'
}
</script>
<style lang="css" scoped>
.box {
border: 3px solid #ccc;
width: 400px;
padding: 10px;
margin: 20px;
}
h2 {
margin-top: 10px;
}
</style>
3. Use of vuex-create warehouse
1.Install vuex
Installing vuex is similar to vue-router. vuex is an independent plug-in. If vuex is not selected for scaffolding initialization, additional installation is required.
yarn add vuex@3 或者 npm i vuex@3
2. Create a new one store/index.jsspecifically to store vuex
In order to keep the project directory clean, create a new store directory under the src directory and place an index.js file under it. ( router/index.jssimilar to )
3. Create a warehousestore/index.js
// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)
// 创建仓库 store
const store = new Vuex.Store()
// 导出仓库
export default store
4 Import and mount it to the Vue instance in main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')
From now on, an empty warehouse has been successfully created !!
5. Test printing Vuex
app.vue
created(){
console.log(this.$store)
}
4. Core concept - state state
1. Goal
Clarify how to provide data to the warehouse and how to use the data in the warehouse
2. Provide data
State provides the only public data source, and all shared data must be stored in the State in the Store.
Open the store.js file in the project and add the data we want to share in the state object.
// 创建仓库 store
const store = new Vuex.Store({
// state 状态, 即数据, 类似于vue组件中的data,
// 区别：
// 1.data 是组件自己的数据,
// 2.state 中的数据整个vue项目的组件都能访问到
state: {
count: 101
}
})
3. Access data in Vuex
Question: How to get count in component?
- Direct access via $store —> { { $store.state.count }}
- Map calculated properties through the helper function mapState —> { { count }}
4. Syntax for accessing through $store
获取 store：
1.Vue模板中获取 this.$store
2.js文件中获取 import 导入 store
模板中： {
{
$store.state.xxx }}
组件逻辑中： this.$store.state.xxx
JS模块中： store.state.xxx
5. Code implementation
5.1 Used in templates
You can use $store in the component to get the store object instance in vuex, and you can get the count through the state attribute , as follows
<h1>state的数据 - {
{ $store.state.count }}</h1>
5.2 Used in component logic
Define the state attribute in the calculated attribute https://vuex.vuejs.org/zh/guide/state.html
<h1>state的数据 - {
{
count }}</h1>
// 把state中数据，定义在组件内的计算属性中
computed: {
count () {
return this.$store.state.count
}
}
5.3 Used in js files
//main.js
import store from "@/store"
console.log(store.state.count)
It is too troublesome to provide calculated properties one by one like this every time. Do we have a simple syntax to help us get the value in state?