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: {
  }
})

二、核心概念五部分：

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: {
  }
})

在页面使用

原始方法

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: {
  }
})

在页面中使用

原始方法

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: {
  }
})

在页面中的使用：

原始方法：

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: {
  }
})

在页面中使用：

原始方法：

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）