Vuex

作者: 夜夜夜空灵 | 来源:发表于2018-10-30 19:05 被阅读0次
微信截图_20181030160531.png
微信截图_20181030161411.png

首先我们在 vue.js 2.X 开发环境中安装 vuex :

npm install vuex --save
微信截图_20181030164526.png

然后在store目录下新建以下文件:
1.state.js(存放所有的状态)
2.actions.js(更新所有的状态)
3.mutations.js
4.mutation-types.js(存放action和Mutations中的共同所有的常量)
5.getters.js
6.index.js

接着就需要在index.js文件下引入所有的文件了

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex);

//初始化一个store对象,因为取什么都是通过$store来取
export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})

由于Vuex是要在全局范围内都能使用,因此要在main.js中引入

import store from './store'

再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
  el: '#app',
  router,
  store,//使用store
})

实现简易todolist功能

1.调用dispatch方法去使用vuex中的方法

<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入今天的任务清单,按回车键确认"
      v-model="title"
      @keyup.enter="addItem"
    />
  </div>
</template>

<script>
  export default {
    name: "Header",
    props: {
      addTodo: Function
    },
    data() {
      return {
        title: ''
      }
    },
    methods: {
      addItem() {
        // 1.1 判断是否合理
        const title = this.title.trim();
        if(!title){
           alert('输入的内容不能为空');
           return;
        }
        // 1.2 生成一个todo对象
        const todo = {title, finished: false};
        // 1.3 调用方法
        // this.addTodo(todo);
        this.$store.dispatch('addTodo', todo);  
        // 1.4 清空输入框
        this.title = ''
      }
    }
  }
</script>

2.实现actions中的方法
要确保方法名addTodo一致,同时 {commit}这个参数是vuex自带的,只要一生成就有,第二个参数为所需要传递的数据

export default {
 // 添加一条记录
 addTodo({commit}, todo){
     commit()
 },

3.为了使coomit能够进一步提交,需要在mutation-types中确定一个跟 actions中一样的方法名

export const ADD_TODO = 'add_todo'; // 增加一条记录

4.在mutations中实现进一步提交修改state中的数据
state也是生成后自带的一个参数

import {
 ADD_TODO,
} from './mutation-types';

export default {
 // 添加纪录
 [ADD_TODO](state, {todo}){
   state.todos.unshift(todo);
 },

5.通过actions中的commit实现提交方法到Mutation中修改数据
导入公共方法ADD_TODO 然后通过commit提交方法以及数据

import {
  ADD_TODO,
} from './mutation-types'

export default {
  // 添加一条记录
  addTodo({commit}, todo){
      commit(ADD_TODO, {todo})
  },

相关文章

  • VUEX基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • 【文档笔记】-Vuex

    什么是vuex? vuex文档: https://vuex.vuejs.org/zh/[https://vuex....

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • Vuex

    安装Vuex cnpm install vuex --save-dev Vuex是什么? 这是[Vuex的官网](...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex+axios 的开发流程记录

    相关文档 vuex: https://vuex.vuejs.org/zh/ 是否有必要使用vuex vuex是vu...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

网友评论

      本文标题:Vuex

      本文链接:https://www.haomeiwen.com/subject/ahpgtqtx.html