初探Vuex，使用Vue-cli，Vuex实现一个简单的TodoList

1.vue-cli创建工程的两种方法

全局安装vue-cli工具的命令：npm install -g @vue/cli，-g表示全局安装。

创建vue工程：首先需要进入到创建工程的目录

创建vue工程命令：vue create 项目名（小写字母、可以有横线和下划线）

回车后，会出现vue-cli的一些选项，如果使用default就会创建默认的工程，第二个则是手动
当我们选择了默认的cli配置后等待安装

2.TodoList开发

2.1 Vuex简介

使用vuex，首先定义一个store这样的js文件，在文件中引入vuex

• state: 组件的状态（需要管理的或者组件公用的）
• mutations: 定义改变状态的方法集，用来操作state里面的数据（只能通过mutation更Store数据，不可以直接操作Store中的数据）
• actions: action 提交的是 mutation，而不是直接变更状态。可以包含任意异步操作
• getters: getters相当于store的计算属性

import { createStore } from 'vuex'
export default createStore({
  state: {
    todoList: []
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  }
})

在组件中使用vuex，将store绑定到main.js方便所有组件调用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')

2.2 创建FormTodoList组件

组件中访问state数据的一种方式：

this.$store.state.全局数据类型

,
触发mutations中的方法更改state状态：

this.$store.commit（xxx）

详细代码如下

<template>
  <div>
    <input type="text" v-model="todoMessage" placeholder="请输入你要做的事" />
    <button @click="addTodo">添加</button>
    <TodoList :todoList="todoList" />
  </div>
</template>

<script>
import TodoList from "../components/TodoList";
export default {
  name: "FromTodoList",
  data() {
    return {
      todoList: this.$store.state.todoList,
      todoMessage: ""
    };
  },
  methods: {
    addTodo() {//添加操作
      this.$store.commit("addTodo", {id:'4',content:this.todoMessage,status:false});
    }
  },
  components: {
    TodoList
  }
};
</script>

<style scoped>
</style>>

2.2 创建TodoList组件

通过例如:todo="todo"的方式给子组件Todo传值，通过下面的方式引入Todo组件

import Todo from “…/components/Todo”;

components: {
Todo
}

<template>
  <div>
    <ul>
      <Todo v-for="todo in todoList" :key="todo.id" :todo="todo" />
    </ul>
  </div>
</template>

<script>
import Todo from "../components/Todo";
export default {
  name: "TodoList",
  props: ["todoList"],
  data() {
    return {};
  },
  components: {
    Todo
  }
};
</script>

<style>
</style>

2.2 创建Todo组件

<template>
  <div>
    <li :style="{'textDecoration': (todo.status ? 'line-through':'none'),'display':'inline'}" @click="updateTodo">
      {{todo.content}}
    </li>
    <span @click="deleteTodo">X</span>
  </div>
</template>

<script>
export default {
  name: "Todo",
  props: ["todo"],
  data() {
    return {};
  },
  methods: {
    updateTodo() {
      console.log("update");
      this.$store.commit("updateTodo", this.todo);
    },
    deleteTodo() {
      console.log("del");
      this.$store.commit("deleteTodo", this.todo.id);
    }
  }
};
</script>

<style>
</style>

2.2 状态管理代码store.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    todoList: [
      {
        id: 1,
        content: '吃飯',
        status: false
      },
      {
        id: 2,
        content: '睡觉',
        status: true
      },
      {
        id: 3,
        content: '打豆豆',
        status: false
      }]
  },
  mutations: {
    addTodo: (state, todo) => {
      state.todoList.push(todo)
    },
    updateTodo: (state, actionTodo) => {
      const index = state.todoList.findIndex(todo => todo.id === actionTodo.id)
      if (index !== -1) {
        state.todoList[index].status = !actionTodo.status
      }
      console.log(state.todoList);
    },
    deleteTodo: (state, id) => {
      const index = state.todoList.findIndex(x => x.id === id)
      if (index !== -1) {
        state.todoList.splice(index, 1)
      }
    }
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})

总结

只是很入门的vux，后续还有可以重构的点，例如将mutation中的事件需要actions来提交，通过辅助函数（mapActions）或者this.$store.dispatch触发state,mutations,actions,getters和setters,就是vuex的全家桶，它里面还有很多东西要去更进一步学习

来源：oschina

链接：https://my.oschina.net/u/4342092/blog/4540236