扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要为大家展示了“vuex中mapState,mapGetters,mapActions,mapMutations怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vuex中mapState,mapGetters,mapActions,mapMutations怎么用”这篇文章吧。
站在用户的角度思考问题，与客户深入沟通，找到乳源网站设计与乳源网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、网站空间、企业邮箱。业务覆盖乳源地区。
一、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters
何为四大金刚？
1.State （这里可以是 小写的 state，跟官网保持一致，采用大写，因为个人习惯，后面的代码介绍采用小写）
vuex的状态管理，需要依赖它的状态树，官网说：
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
简单粗暴理解： 我们要把我们需要做状态管理的量放到这里来，然后在后面的操作动它
我们来声明一个state：
const state = {
blogTitle: '迩伶贰blog',
views: 10,
blogNumber: 100,
total: 0,
todos: [
{id: 1, done: true, text: '我是码农'},
{id: 2, done: false, text: '我是码农202号'},
{id: 3, done: true, text: '我是码农202号'}
]
}2. Mutation
我们有了state状态树，我们要改变它的状态（值），就必须用vue指定唯一方法 mutation，官网说：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
简单粗暴理解：任何不以mutation的方式改变state的值，都是耍流氓（违法）
我们来一个mutation：
const mutation = {
addViews (state) {
state.views++
},
blogAdd (state) {
state.blogNumber++
},
clickTotal (state) {
state.total++
}
}3.Action
action 的作用跟mutation的作用是一致的，它提交mutation，从而改变state，是改变state的一个增强版，官网说：
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
简单粗暴理解： 额，这总结的差不多了，就这样理解吧！
我们来一个action：
const actions = {
addViews ({commit}) {
commit('addViews')
},
clickTotal ({commit}) {
commit('clickTotal')
},
blogAdd ({commit}) {
commit('blogAdd')
}
}4.Getter
官网说：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。减少我们对这些状态数据的操作
简单粗暴理解：状态树上的数据比较复杂了，我们使用的时候要简化操作，上面的state.todos 是一个对象，在组件中挑不同的数据时，需要对其做下处理，这样每次需要一次就处理一次，我们简化操作，将其在getter中处理好，然后export 一个方法；（额，好像说复杂了）
我们来一个getter：
const getters = {
getToDo (state) {
return state.todos.filter(item => item.done === true)
// filter 迭代过滤器 将每个item的值 item.done == true 挑出来， 返回的是一个数组
}
}二、使用
学不用，傻学，没啥用，我们得用起来：
1、src 下新建文件
我们在项目（vue-cli 脚手架）下 src 文件夹下新建一个 store，在这个store下新建 index.js 文件，将上面的代码填入，如下面完整的内容：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
blogTitle: '迩伶贰blog',
views: 10,
blogNumber: 100,
total: 0,
todos: [
{id: 1, done: true, text: '我是码农'},
{id: 2, done: false, text: '我是码农202号'},
{id: 3, done: true, text: '我是码农202号'}
]
}
const actions = {
addViews ({commit}) {
commit('addViews')
},
clickTotal ({commit}) {
commit('clickTotal')
},
blogAdd ({commit}) {
commit('blogAdd')
}
}
const mutations = {
addViews (state) {
state.views++
},
blogAdd (state) {
state.blogNumber++
},
clickTotal (state) {
state.total++
}
}
const getters = {
getToDo (state) {
return state.todos.filter(item => item.done === true)
// filter 迭代过滤器 将每个item的值 item.done == true 挑出来， 返回的是一个数组
}
}
export default new Vuex.Store({
state,
actions,
mutations,
getters
})
// 将四大金刚挂载到 vuex的Store下2、main.js 导入文件
import Vue from 'vue'
import App from './App'
import router from './router/router.js'
// 引入 状态管理 vuex
import store from './store'
// 引入elementUI
import ElementUI from 'element-ui'
// 引入element的css
import 'element-ui/lib/theme-chalk/index.css'
// 引入font-awesome的css
import 'font-awesome/css/font-awesome.css'
// 引入自己的css
import './assets/css/custom-styles.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '请着重看加粗部分，非加粗部分是import 其他项目功能
3、组件中使用
先上这个组件代码：