Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
-
状态,驱动应用的数据源;
-
视图,以声明方式将状态映射到视图;
-
操作,响应在视图上的用户输入导致的状态变化。
但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: -
多个视图依赖于同一状态。
-
来自不同视图的行为需要变更同一状态。
Vuex可以适用于多个组件之间共享数据
安装Vuex
npm install vuex@next --save
搭建Vuex环境:
创建文件src/store/inde.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
在入口文件mian.js
添加配置项:
......
//引入store
import store from './store'
......
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
state
:初始化存储数据
getters
:Vuex 允许我们在 store 中定义“getters”(可以认为是 store 的计算属性)。
mutation
:唯一更改state数据状态的方法就是提交mutation,并且它会接受 state 作为第一个参数。
action
:action 提交的是 mutation,而不是直接变更状态,并且action 可以进行异步操作。
组件中进行读取数据:$store.state.data
组件中修改vuex中的数据:$store.dispatch('action中的方法名',data)
map方法
mapState
:将state中的数据映射为计算属性。
computed: {
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState({sum:'sum',school:'school'}),
//借助mapState生成计算属性:sum、school、subject(数组写法)
...mapState(['sum','school']),
},
mapGetters
:将getters中的数据映射为计算属性。
computed: {
//借助mapGetters生成计算属性:getSum(对象写法)
...mapGetters({getSum:'getSum'}),
//借助mapGetters生成计算属性:getSum(数组写法)
...mapGetters(['getSum'])
},
mapAction
:将action中的数据映射为计算属性。
methods:{
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
mapMutation
:将mutation中的数据映射为计算属性。
methods:{
//靠mapActions生成:increment、decrement(对象形式)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['JIA','JIAN']),
}