1.Vuex 是为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用所有组件的状态,并以相应的规则保证状态以可预测的方式发生变化。 2.能够在vuex中集中管理共享的数据,便于开发和后期进行维护。 3.能够高效的实现组件之间的数据共享,提高开发效率。 4.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新。
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 数据
},
// 只有 mutations 中定义的函数,才有权利修改 state 中的数据
mutations: {
// 方法
},
actions: {
methodAsync(context) {
// 异步操作
},
},
getters: {
// 数据加工
}
})
new Vue({
store,
render: h => h(App)
}).$mount('#app')
Getter 是什么
Getter 用于对 Store 中的数据进行加工处理形成新的数据,它只会包装 Store 中保存的数据,并不会修改 Store 中保存的数据。 当 Store 中的数据发生变化时,Getter 生成的内容也会随之变化
Getter 的使用方式
// 在 store.js 中添加 getter 属性
getters:{
//添加了一个属性
属性名 : state => {
return "修饰后的内容";
}
}
/*
方式一
*/
// 在对应 vue 组件中使用以下方式
this.$store.getters.属性名
/*
方式二
*/
// 1. 在对应 vue 组件中引入 mapGetter
import { mapGetters } from 'vuex'
// 2. 将 Getter 属性映射为 计算属性
computed:{
...mapGetters(['showNum'])
}