vue(Vuex相关)

state->单一状态树（单一数据源）
使用一个store去存储数据属性
getters类似于computed，用于获取state中变异后的状态
bigger(){
      return this.$store.state.persons.filter((item)=>{
        return item.age>=20;
      });//多看看这个!!

         <!-- 定义自己传参的getters方法!!! -->
        moreit(state){
            return (age1)=>{
                return state.persons.filter((item)=>{return item.age>age1})
            };
        };//通过返回一个函数来实现

mutations -> 类似于methods，但是有很多细节不同


响应式传值到state
vuex中(getters):
        addp(state,stu){
            state.persons.push(stu);
        }
App中(methods):
    addperson() {//传值到state
      const p1 = { age: 22, name: "Ak47" };
      //这叫做payload，负载，就意思是带东西传值
      this.$store.commit("addp",p1);//提交(vuex中getters函数，传入对象)
    },

Mutation标准提交风格: this.$store.commit("addp");
      this.$store.commit({//特殊风格提交
        type:'add',
      })
      这种风格适合添加载荷payload！！！


              cha(state){
            state.name1.name='M4A1';
            state.name1['age1']=21;//定义新属性!!!
            setTimeout(() => {
                // delete state.name1.age1;//不知道为啥这个没用
                Vue.delete(state.name1,'age1');//响应式的!!!
                console.log(123);
            }, 2000);
        }

Mutation要求同步!,异步方法要写在action中


    actions:{//替代Mutation进行异步操作(细节有所不同)
        aup(context){
            setTimeout(() => {
                context.commit('add');//不能跳过 mutations！！！！
                //actions只是在中间加了一步!!!
            }, 1000);
        }
    },

import Vue from 'vue'
// import { delete } from 'vue/types/umd';
import Vuex from 'vuex'

Vue.use(Vuex)

const store=new Vuex.Store({
    state:{
        num:10,
        persons:[
            {age:20,name:'AK12'},
            {age:12,name:'an94'},
            {age:21,name:'hk416'},
            {age:22,name:'ump45'}
        ],
        name1:{name:'AR15'},
    },
    mutations:{//类似于methods，但是有很多细节不同
        add(state){
            state.num++;
        },
        addp(state,stu){
            state.persons.push(stu);
        },
        cha(state){
            state.name1.name='M4A1';
            state.name1['age1']=21;//定义新属性!!!
            setTimeout(() => {
                // delete state.name1.age1;//不知道为啥这个没用
                Vue.delete(state.name1,'age1');//响应式的!!!
                console.log(123);
            }, 2000);
        }
    },
    actions:{//替代Mutation进行异步操作(细节有所不同)
        aup(context){
            setTimeout(() => {
                context.commit('add');//不能跳过 mutations！！！！
                //actions只是在中间加了一步!!!
            }, 1000);
        }
    },
    getters:{//getters类似于computed，用于获取state中变异后的状态
        pf(state){
            return state.num*state.num;
        },
        more(state){
            return state.persons.filter((item)=>{
                return item.age>=20;
            })
        },
        morelength(state,getters){//getters里面的函数可以拿到getters对象!!!
            return getters.more.length;
        },
        moreit(state){
            return (age1)=>{
                return state.persons.filter((item)=>{return item.age>age1})
            };
        },
    },
    modules:{},
})

export default store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/vuexindex'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

<template>
  <div id="app">
    <h1>{{ $store.state.num }}</h1>
    <button @click="btn1">+</button>
    <h2>{{ $store.getters.pf }}</h2>
    <h1>{{ bigger }}</h1>
    <h2>{{ $store.getters.more }}</h2>
    <a href="###">{{ $store.getters.morelength }}</a>
    <h1>{{ $store.getters.moreit(12) }}</h1>
    <button @click="addperson">+person</button>
    <!-- 定义自己传参的getters方法!!! -->
    <!-- 通过方法返回一定范围的值 -->
    <h1>{{$store.state.name1}}</h1>
    <button @click="btn2">@</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    btn1() {
      // this.$store.commit("add");//标准格式提交
      this.$store.commit({//特殊风格提交
        type:'add',//这种风格适合添加载荷payload！！！
      })
    },
    addperson() {//传值到state
      const p1 = { age: 22, name: "Ak47" };
      //这叫做payload，负载，就意思是带东西传值
      this.$store.commit("addp",p1);//提交(vuex中getters函数，传入对象)
    },
    btn2(){
      this.$store.commit('cha');
    }
  },
  computed: {
    bigger() {
      return this.$store.state.persons.filter((item) => {
        return item.age >= 20;
      });
      // <!-- 通过方法返回一定范围的值 -->
    },
  },
};
</script>

<style>
</style>