Vuex
1.简介
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,
并以相应的规则保证状态以一种可预测的方式发生改变
简单来说,就是用来集中管理数据
2.基本用法
2.1 安装vuex
cnpm install vuex -S
2.2 创建store.js文件,用于配置vuex,在main.js中导入,并配置store选项
main.js:
import Vue from 'vue'
import App from './App.vue'
import store from './store.js'
new Vue({
store:store,
el: '#app',
render: h => h(App)
})
2.3 编辑store.js文件配置store(核心)
Vuex的核心是Store(仓库),相当于是一个容器,一个store实例中包含以下属性的方法(核心)
state ===> 定义属性(状态,数据)
getters ===> 获取属性和方法
actions ===> 用于定义方法(动作)
commit ===> 提交变化,修改数据的唯一方式,就是显示的提交mutations
mutations ===> 修改数据,定义变化
配置store代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var state = {
count:6
}
const store = new Vuex.Store({
state:state
})
export default store;
2.4 编辑App.vue
在子组件中访问store对象的两种方式
1). 通过this.$store访问
2). 通过mapGetters、mapActions访问(要使用这两个方法,需要先导入)
mapGetters ==> 获取属性(数据)
mapActions ==> 获取方法(动作)
..........未完,待续...........