这里是store的代码
// 引入Vue构造函数
import Vue from "vue"
//引入 vuex
import vuex from "vuex"
//将vuex挂载到vue
Vue.use(vuex);
//创建仓库
var store =new vuex.Store({
//定义状态
state:{
title:"萝卜头",
},
//mutations定义同步操作的方法
mutations:{
//定义改变title的方法
fn(state,val){ //state：代表store的state val代表组件传递的值
state.title=val
}
}
})
//导出创建的仓库
export default store
这里是main.js文件的代码
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//引入 创建的store仓库
import store from "./store";
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
//将store挂载到vue
store,
components: { App },
template: '<App/>'
})
这里是组件的代码
<template>
<div>
<!-- 这里给 mark添加一个点击事件 调用一个方法 方法传递的参数是字符串：'爆炸头'-->
<mark @click="fn('爆炸头')">点击有惊喜</mark>
<!-- 这里查看store的title状态值-->
<p>造型：{{this.$store.state.title}}</p>
</div>
</template>
<script>
// mapMutations 辅助函数
//你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
import {mapMutations} from "vuex"
export default {
name: "Home",
//在methods使用 mapMutations辅助函数
methods:{
//这里的mapMutations的fn指的是store的fn
...mapMutations(["fn"])
}
}
</script>
<style scoped>
</style>
官方文档的地址：
https://vuex.vuejs.org/zh/guide/mutations.html
