一、vuex简介
vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起,集中式来管理。需要声明的是,这里所说的状态指的是vue组件中data里面的属性。
二、核心概念
store:vuex 中最关键的是store对象,这是vuex的核心。可以说,vuex这个插件其实就是一个store对象,每个vue应用仅且仅有一个store对象。
store创建
new Vuex.Store({
})
在store中又包含了5个对象
- state – 存放状态
- getters – state的计算属性
- mutations – 更改状态的逻辑,同步操作
- actions – 提交mutation,异步操作
- mudules – 将store模块化
完整结构(也可以每个单独来写)
const store = new Vuex.Store({
state: {
// 存放状态
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑,同步操作
},
actions: {
// 提交mutation,异步操作
},
// 如果将store分成一个个的模块的话,则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
modules: {
a: moduleA,
b: moduleB,
// ...
}
});
三、相关案例
单个模块时:当点击增加时 执行increment事件,到action中提交(函数)到mutations将state传递进去
创建store.js仓库,并且引入vue与vuex,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
count:1
}
// 监听 state数据的更新
const mutations = {
// 才是具体方法的实现
increment(state) {
state.count++
},
decrement(state) {
state.count--
}
}
const actions = {
increment: ({ commit }) => {
commit('increment')
},
decrement: ({ commit }) => {
commit('decrement')
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
在主入口引入store.js文件 并将其挂载到实例中
import store from './store'
new Vue({
render: h => h(App),
store
}).$mount('#app')
```创建vuex组件
```handlebars
<template>
<div>
<h1>vuex组件</h1>
<!-- 展示 vuex中的数据 state -->
{{$store.state.count}}
<button type="button" @click='increment'>增加</button>
<button type="button" @click='decrement'>减少</button>
</div>
</template>
<script>
//当点击增加时 执行increment事件,到action中提交(函数)到mutations将state传递进去
import {mapActions} from 'vuex'
export default {
methods:mapActions([ //mapActions分发方法 到仓库中的action
'increment',
'decrement'
])
}
</script>
如果挂载//在主入口文件中只能挂载一个store仓库,挂载多个仓库时 先封装在一个index.js中,然后在index.js中通过modules暴露最终的store仓库多个仓库时:
export default new Vuex.Store({
modules:{
count,
money
}
})