标签：const 改造 state store commit vuex any todos

 

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);
  }
}

 

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});
  },
}

 

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>

 

标签：const,改造,state,store,commit,vuex,any,todos
来源： https://www.cnblogs.com/mingforyou/p/15256667.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。