vuex简单使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

1、共享数据和状态集中管理易于开发和后期维护

2、状态存储具有响应式的特点,实时保持各页面的数据同步

一、使用:

1、搭建vue脚手架vue3.0+在脚手架安装时就可以选择同时安装好vuex

2、目录结构:在src文件夹下面有一个store文件夹里面的index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
vuex文件初始状态

二、核心概念五部分:

1、state 数据

所有需要共享的数据和状态都存放在state里 

例如home页面这个列表和about页面共用

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 数据
  state: {
    list: [
      { id: 1, name: "李一", ctime: '2020/6/28' },
      { id: 2, name: "李二", ctime: '2020/6/28' },
      { id: 3, name: "李三", ctime: '2020/6/28' },
      { id: 4, name: "李四", ctime: '2020/6/28' }
    ],
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
state

在页面使用

原始方法

this.$store.state.list

1)先在页面引入mapState(mapState是辅助函数)

import { mapState } from 'vuex'

2)在计算属性调用方法

computed: {
  ...mapState(['list']),
},

3)直接在列表中使用

<table border="1px" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.ctime }}</td>
          <td>
            <span @click="delList(item.id)">删除</span>
          </td>
        </tr>
      </tbody>
 </table>
列表

2、getters 过滤

在我们使用数据时有时候需要原始数据的部分,getters就是对数据进行过滤或计数使用,不能用来改变原始数据 我们可以用搜索做事例

 

过滤方法可以写在getters里

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 数据
  state: {
    list: [
      { id: 1, name: "李一", ctime: '2020/6/28' },
      { id: 2, name: "李二", ctime: '2020/6/28' },
      { id: 3, name: "李三", ctime: '2020/6/28' },
      { id: 4, name: "李四", ctime: '2020/6/28' }
    ],
  },
  // 过滤
  getters: {
    // forEach 循环 some 循环遇true终止 filter 过滤 findIndex 找索引
    searchList: (state) => (name) => {
      return state.list.filter(item => {
        if (item.name.includes(name)) {
          return item;
        }
      });
    }
  },
  // 修改
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
getters

在页面中使用

原始方法

this.$store.getters.searchList

1)先在页面引入mapGetters(mapGetters是辅助函数)

import { mapGetters } from 'vuex'

2)在计算属性调用

computed: {
    ...mapGetters(['searchList']),
},

3)在列表中使用

<label>搜索:<input type="text" v-model="keyword" v-focus v-color/></label>
    <table border="1px" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in searchList(keyword)" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.ctime }}</td>
          <td>
            <span @click="delList(item.id)">删除</span>
          </td>
        </tr>
      </tbody>
    </table>
列表

3、mutations 修改

在vuex中我们前面说过在state只能存放状态 不能直接操作修改状态 所以想要修改数据只能通过提交mutations

 

对数据变更的方法可以写在mutations

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 数据
  state: {
    list: [
      { id: 1, name: "李一", ctime: '2020/6/28' },
      { id: 2, name: "李二", ctime: '2020/6/28' },
      { id: 3, name: "李三", ctime: '2020/6/28' },
      { id: 4, name: "李四", ctime: '2020/6/28' }
    ],
  },
  // 过滤
  getters: {
    // forEach 循环 some 循环遇true终止 filter 过滤 findIndex 找索引
    searchList: (state) => (name) => {
      return state.list.filter(item => {
        if (item.name.includes(name)) {
          return item;
        }
      });
    }
  },
  // 修改
  mutations: {
    // 删除
    delList(state, id) {
      return state.list.some((item, i) => {
        if (item.id === id) {
          state.list.splice(i, 1);
          return true;
        }
      });
    },
  },
  actions: {
  },
  modules: {
  }
})
mutations

在页面中的使用:

原始方法:

this.$store.commit('delList',id) //方法名和参数

1)先在页面引入mapMutations(mapMutations是辅助函数)

import { mapMutations } from 'vuex'

2)在方法中调用

methods: {
    ...mapMutations(['delList'])
},

3)在列表中使用

    <table border="1px" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in searchList(keyword)" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.ctime }}</td>
          <td>
            <span @click="delList(item.id)">删除</span>
          </td>
        </tr>
      </tbody>
    </table>
列表

4、actions  异步

actions并不是直接变更state,它提交的是mutations,和mutations不同的是它可以进行异步操作

 

异步操作可以写在actions中

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 数据
  state: {
    list: [
      { id: 1, name: "李一", ctime: '2020/6/28' },
      { id: 2, name: "李二", ctime: '2020/6/28' },
      { id: 3, name: "李三", ctime: '2020/6/28' },
      { id: 4, name: "李四", ctime: '2020/6/28' }
    ],
  },
  // 过滤
  getters: {
    // forEach 循环 some 循环遇true终止 filter 过滤 findIndex 找索引
    searchList: (state) => (name) => {
      return state.list.filter(item => {
        if (item.name.includes(name)) {
          return item;
        }
      });
    }
  },
  // 修改
  mutations: {
    // 删除
    delList(state, id) {
      return state.list.some((item, i) => {
        if (item.id === id) {
          state.list.splice(i, 1);
          return true;
        }
      });
    },
    // 添加
    add(state, item) {
      return state.list.push({ id: item.id, name: item.name, ctime: '2020/6/29' });
    }
  },
  // 异步提交mutations
  actions: {
    // 异步添加
    addList(context, item) {
      context.commit('add', item )
    }
  },
  modules: {
  }
})
actions

在页面中使用:

原始方法:

this.$store.dispatch('add',{age:15}) // 方法名和参数

1)先在页面引入mapMutations(mapMutations是辅助函数)

import { mapActions } from 'vuex'

2)在方法中调用

methods: {
    ...mapActions(['addList']),
},

3)在列表中使用

    <div class="addclass">
        <label>
          ID:
          <input type="text" v-model="id" />
        </label>
        <label>
          Name:
          <input type="text" v-model="name" @keyup.enter="addList({id:id,name:name})" />
        </label>
        <input type="button" value="添加" @click="addList({id:id,name:name})" />
        <label>
          搜索:
          <input type="text" v-model="keyword"/>
        </label>
      </div>
添加

5、Module 模块

当应用变得非常复杂时,store 对象就有可能变得相当臃肿,Vuex 允许我们将 store 分割成模块(module)

posted @ 2020-06-30 09:01  布吉岛丶  阅读(126)  评论(0编辑  收藏