目录
vuex是什么?
vuex是实现组件全局状态管理的一种机制,可以方便的实现组件之间的数据共享。
上图中所示的分别为传统组件之间传值和使用vuex传值的不同(图画的有点丑,将就点看吧(# ̄▽ ̄#))
使用vuex统一管理状态的好处
(1)能够在vuex中集中管理共享的数据,易于开法和后期的维护
(2)能够高效的实现组件之间的数据共享,提高开发的效率
(3)存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
什么样的数据适合存储到vuex中
组件中共享的数据存入vuex,私有数据依旧存储在自身的data中。
安装vuex
使用npm输入以下命令进行安装
npm install vuex --save
出现以下情况,则代表安装完成
若是出现报错,如下:
则输入以下命令npm view vuex versions --json查版本,寻找适合的版本(不要最新的)
然后npm install vuex@版本号(比如3.6.2) --save根据版本下载,这样就可以了!
点击package.json文件,查看是否安装完成,如下图:
成功安装之后,在文件src下面创建一个store文件夹,在store文件夹下创建index.js文件。
成功创建之后,点开main.js文件,在最下方Vue中添加一个store这个属性,同时引入之前创建好的store文件,代码如下:
import Vue from 'vue'
import App from './App.vue'
import store from '../store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
然后点击之前创建的store文件下的index文件,将vuex导入并安装到vue项目中,代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
},
mutations:{
},
actions:{
}
})
使用vuex
接下来写个小demo,方便更好理解,在使用之前,先打开vue.config.js,若没有则新建一个,添加以下代码:
lintOnSave: false
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false //避免语法检查的时候把不规范的代码(即命名不规范)当成了错误
})
随后在components文件夹下方新建两个文件,分别为Addition和Subtraction。
Addition内容为:
<template>
<div>
<div>add页面中count值为:</div>
<button>+1</button>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
Subtraction内容为:
<template>
<div>
<div>sub页面中count值为:</div>
<button>-1</button>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
App.vue中内容为:
<template>
<div>
<my-addition></my-addition>
<p>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
<my-subtraction></my-subtraction>
</div>
</template>
<script>
import Addition from "./components/Addition.vue"
import Subtraction from "./components/Subtraction.vue"
export default {
data () {
return {
};
},
components:{
'my-addition':Addition,
'my-subtraction':Subtraction
}
}
</script>
vuex核心概念
state属性:state提供唯一的公共数据源,所有共享的数据都要统一放到store的state中进行存储。
mutations:唯一能改变sta