vuex store 改造

 

state.ts

export default {
  todos:[
    {id:1,name:'张三'},
    {id:2,name:'李四'},
    {id:3,name:'王五'}
  ]
}

getters.ts

export default {
  todosCount(state: { todos: string | any[]; }){
    return state.todos.length;
  },

  selectedCount(state: { todos: string | any[]; }){
    return 111;
  },

  isChecked(state: { todos: string | any[]; }, getters: { selectedCount: () => any; }){
    return getters.selectedCount() == state.todos.length;
  }

}

 

mutations-type.ts

export const ADD_TODO = 'add_todo'
export const DEL_TODO = 'del_todo'
export const IS_SELECTED_ALL = 'is_selected_all'
export const NU_SELECTED_ALL = 'un_selected_all'

 

mutations.ts

import {ADD_TODO,DEL_TODO,IS_SELECTED_ALL,NU_SELECTED_ALL} from './mutations-type'

export  default  {
  [ADD_TODO](state: { todos: any[]; }, {todo}: any){
    state.todos.unshift(todo);
  },

  [DEL_TODO](state: { todos: any[]; }, {index}: any){
    state.todos.splice(index,1);
  }
}

 

import {ADD_TODO,DEL_TODO,CHANGE_TODO,IS_SELECTED_ALL,NU_SELECTED_ALL} from './mutations-type'

export  default  {
  [ADD_TODO](state: { todos: any[]; }, {todo}: any){
    state.todos.unshift(todo);
  },

  [CHANGE_TODO](state: any){
    delete state.todos.age;
  },

  [DEL_TODO](state: { todos: any[]; }, {index}: any){
    state.todos.splice(index,1);
  }
}

 

actions.ts

import {ADD_TODO,DEL_TODO,IS_SELECTED_ALL,NU_SELECTED_ALL} from './mutations-type'

export default {
  addTodo({ commit }: any, todo: any){
    commit(ADD_TODO,{todo});
  },

  delTodo({ commit }: any, index: any){
    commit(DEL_TODO,{index});
  },
}

 

import {ADD_TODO,DEL_TODO,IS_SELECTED_ALL,NU_SELECTED_ALL} from './mutations-type'

export default {
  // addTodo({ commit }: any, todo: any){
  //   commit(ADD_TODO,{todo});
  // },

  addTodo(context: any, todo: any){
    context.commit(ADD_TODO,{todo});
  },

  delTodo({ commit }: any, index: any){
    commit(DEL_TODO,{index});
  },

  // delTodo(context: any, index: any){
  //   console.log(context);
  //   context.commit(DEL_TODO,{index});
  // },
}

 

 

 

index.ts

import { createStore } from 'vuex';
import state from './state';
import getters from './getters';
import mutations from './mutations';
import actions from './actions';

const store = createStore({
    // // strict:true,
    // // strict:process.env.NODE_NEV !== 'production',
    // // 全局共享的状态（数据）存放
    // state: {
    //     counter : 0
    // },
    // getters: {
    // },
    // // 同步提交状态
    // mutations: {
    //   //加1
    //   INCREMENT(state){
    //     state.counter++;
    //   },
    //   //减1
    //   DECREMENT(state){
    //     state.counter--;
    //   },
    //   //加2
    //   INCREMENT2(state,num){
    //     setTimeout(()=>{
    //       state.counter+=num;
    //     },2000)
    //
    //     // state.counter+=num;
    //   },
    // },
    // // 提交操作（可以是同步也可以是异步）给mutations
    // actions: {
    //   //加1
    //   increment({commit}){
    //     commit('INCREMENT');
    //   },
    //   //减1
    //   decrement({commit}){
    //     commit('DECREMENT');
    //   },
    //   //加2
    //   increment2({commit}){
    //     commit('INCREMENT2');
    //
    //     // setTimeout(()=>{
    //     //   commit('INCREMENT2');
    //     // },2000)
    //   },
    // },
    // modules: {
    // }
  state,
  getters,
  mutations,
  actions
});
export default store

 

 

about.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
<!--    <h2>{{$store.state.counter}}</h2>-->
<!--    <button @click="add">++</button>-->
<!--    <button @click="sub">&#45;&#45;</button>-->
<!--    <button @click="add2(100)">+++</button>-->
    <button @click="addItem">addItem</button>
  </div>
</template>

<script>
import {useStore} from 'vuex';
import {computed} from 'vue';

  export default {
    setup(props){
      const store = useStore();

      const todos = computed(()=> store.state.todos)

      const add = ()=>{
        store.dispatch('increment');
        // store.commit('INCREMENT');
      }

      const sub = ()=>{
        store.dispatch('decrement');
        // store.commit('DECREMENT');
      }

      const add2 = (num)=>{
        // store.dispatch('increment2',num);
        store.commit('INCREMENT2',num);
      }

      let addItem = ()=>{
          console.log("addItem");
        store.dispatch('addTodo', {id:'',name:'赵六'});
        console.log(todos.value);
      }

      const delItem = ()=>{
        if(window.confirm('确认删除？')){
          store.dispatch('delTodo',props.index);
        }
      }

      return{
        add,
        add2,
        sub,
        addItem,
        delItem
      }
    }
  }
</script>