一、简介
我们来看看对Vuex比较专业的介绍:
Vuex是一个专为Vue开发的应用程序的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简而言之,Vuex采用类似全局对象的形式来管理所有组件的公用数据,如果想修改这个全局对象的数据,得按照Vuex提供的方式来修改(不能自己随意用自己的方式来修改)。
二、优点
Vuex状态管理跟使用传统全局变量的不同之处:
1.Vuex的状态存储是响应式的:就是当你的组件使用到了这个Vuex的状态,一旦它改变了,所有关联的组件都会自动更新相对应的数据,这样开发者省事很多。
.
2.不能直接修改Vuex的状态:如果是个全局对象变量,要修改很容易,但是在Vuex中不能这样做,想修改就得使用Vuex提供的唯一途径:显示地提交(commit)mutations来实现修改(解释:也就是通过store对象里定义的mutation属性下的函数来修改Vuex的状态值)。这样做的好处就是方便我们跟踪每一个状态的变化,在开发过程中调试的时候,非常实用。
三、步骤
( 提示:本文后面有源代码地址)
1.安装Vuex
在项目的终端命令行下执行如下命令
npm install vuex --save
2.引用Vuex
在main.js里面引入如下代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3.创建仓库Store
然后在main.js里面创建store对象
//创建一个 store
const store = new Vuex.Store({});
如果还不了解Store里面的4个属性,可以参考这篇文章https://blog.csdn.net/qq_40241957/article/details/99424634
然后我们在store里面写上一些我们自定义的代码
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.config.productionTip = false
const store = new Vuex.Store({
state: { /* vuex的状态量,类似于全局变量,在整个项目里面都可以使用 */
count: 0 //我们以定时器demo为例,就自定义一个count变量
},
getters: {
},
mutations: { /* 在里面 定义处理state里面变量的函数 */
increment (state, value) {
state.count += value
},
decrement (state, value) {
state.count -= value
}
},
actions: {
myIncrease (context) {
context.commit('increment', 1)
},
myDecrease (context) {
context.commit('decrement', 1)
}
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store /* 把上面定义的store对象与本vue实例绑定 */
})
然后我们就可以在App.vue里面写如下代码(提示:App.vue是所有component组件的父组件,可以看到在App.vue代码里面有<router-view/>
,这就是用来展示其他组件的地方。也就是说我们的整个vue项目里面都是展示的App.vue组件的内容,然后随着我们访问不同的路由地址,那么App.vue代码里面的<router-view/>
就会变成不同的组件,从而展示不同的内容)
在HelloWorld.vue里面写如下代码
最后在项目的终端使用命令npm run dev
启动项目,运行效果截图如下:下面有具体讲解
讲解:App.vue是所有component组件的父组件,可以看到在App.vue代码里面有<router-view/>
,这就是用来展示其他组件的地方。也就是说我们的整个vue项目里面都是展示的App.vue组件的内容,然后随着我们访问不同的路由地址,那么App.vue代码里面的<router-view/>
就会变成不同的组件,从而展示不同的内容
下面的运行结果其实是由App.vue这个父组件展示的,然后App.vue代码里面的<router-view/>
,因为我们访问的是localhost:8080/,所以根据路由规则(下面的第2张图),<router-view/>
展示HelloWorld这个component