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）