vuex—mutations

####一、vuex安装好后,默认已经注册到全局 main.js引入 注册 ####二、在store文件夹,index.js中

export default new Vuex.Store({
//state => 存储初始化数据  this.$store.state.flag 获取
state:{
    flag:true,
    todos: [
      { id: 1, text: '写作业', done: true },
      { id: 2, text: '运动', done: false }
    ]
},
//getters => 相当于计算属性computed;也可以对state的数据进行二次过滤(类似于filter)
//下面的doneTodos,是对state的数据todos进行二次过滤
getters:{
    doneTodos: state => {  
      return state.todos.filter(todo => todo.done)
    }
},
//mutations => 更改state里数据的唯一方法
//在test1.vue页面中触发事件时候,在事件函数种中使用 this.$store.commit('SET_FLAG')
mutations:{
    SET_FLAG(state) {
	state.flag= !state.flag
	//console.log(state.flag)
    },
},
actions:{
},
modules:{
}
})

#####test1.vue

<template>
  <div>
    <button @click="changeState">按钮</button>
  </div>
</template>
<script>
import {ref,reactive,computed} from '@vue/composition-api';
export default {
    setup(props,{root}){  
        const changeState = ()=>{
            root.$store.commit('SET_FLAG');
        }
    }
}
</script>

原文地址:https://www.cnblogs.com/maizilili/p/12647980.html