一、介绍
Vuex 是实现组件全局状态(数据)管理的一种机制。可以方便的实现组件之间数据的共享，相当于Java中的全局变量
使用Vuex统一管理状态的好处
能够在vuex中集中管理全局共享的数据，易于开发和后期维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据是响应式的，能够实现保持数据与页面的同步
Vue中组件之间共享数据的方式
- 父向子传值：v-bind 属性绑定
- 子向父传值：v-on 事件绑定
- 兄弟组件之间共享数据：EventBus
- 全局数据统一管理：Vuex
二、环境搭建
1. 安装vuex依赖包
npm install vuex --save
2.导入vuex包，并安装到Vue项目中，new一个Vuex.Store的实例对象，并将他暴露出去
//store.js文件
import Vue from 'vue'
import Vuex from 'vuex' //导入vuex包
Vue.use(Vuex) //安装到Vue项目中
//创建Store对象，并将他暴露出去
export default new Vuex.Store({
// state中存放的就是全局共享的数据
state: {
count: 0
},
}
3.在创建Vue期间，将store对象挂载到vue实例中
//main.js文件
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
render: h => h(App),
// 将创建的共享数据对象，挂载到Vue实例中
// 所有的组件，就可以直接从store中获取全局的数据了
store
}).$mount('#app')
三、Vuex中的四个属性介绍
State 数据源
state中用于提供共享数据源，所有全局共享的数据都要放入次数据中
//store.js
const store = new Vuex.Store({
//创建store数据源，提供唯一公共数据
state: {
count: 0
},
})
//组件中访问State中数据的方式
this.$store.state.count
Mutation 数据变更
Mutation用于变更Store中的数据
- 推荐只通过Mutation变更Store数据，不建议使用这种方式(this.$store.state.count++)直接操作Store中的数据, 这种写法不利于项目后期的维护
- 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监听所有数据的变化
//store.js
const store = new Vuex.Store({
state: {
count: 0
},
mutation:{
add(state){
//变更状态
state.count++
},
//携带参数
addN(state, step){
state.count +=step
}
}
})
//触发mutation中的方法
this.$store.commit('add')
//需要传递参数的写法
this.$store.commit('addN', 3)
Action 异步数据变更
如果通过异步操作变更数据，必须通过Action，而不能在Mutation中直接操作，但是Action中如果要变更数据，不能直接变更，而是通过调用Mutation的方式间接变更数据
//store.js
const store = new Vuex.Store({
state: {
count: 0
},
mutation:{
add(state){
state.count++
}
},
actions:{
addAsync(context){
setTimeout(() => {
context.commit('add')
}, 1000)
},
addAsyncN(context, step){
setTimeout(() => {
context.commit('add', step)
}, 1000)
}
}
})
//触发 Action
this.$store.dispatch('addAsync')
//需要传递参数的写法
this.$store.dispatch('addAsync', 5)
Getter 包装数据
Getter用于对Store中的数据进行加工处理形成新的数据，不会修改state中的数据，只用于包装数据
- Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性
- Stroe中的数据发生变化，Getter的数据也会跟着变化
//store.js
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
showNum: state => {
return '当前最新的数量是' + state.count
}
}
})
//使用 Getters
methods:{
handle(){
//触发action的方式
this.$store.getters.showNum
}
}
四、知识点总结
Vuex介绍`
Vuex的简单实用
store的具体实用步骤 3'Vuex中的核心概念
state的介绍及使用
mutation的介绍及使用
action的介绍及使用
getter的介绍及使用
