一、前言

使用vuex可以实现数据的共享。

二、安装

vscode中新建终端安装vuex。由于vue2不能使用vuex4的版本,所以在安装时需要指定版本3

npm i vuex@3

三、vuex工作流

vuex核心包括actions、mutations、state。

①state用来存储数据;

②actions用来响应组件的事件,也可以对数据进行加工,或者进行后端请求,也就是说组件中调用dispatch方法,可以触发actions中的方法;

③mutations用来操作state,actions中调用commit方法来调用mutations。

④其他:当不需要对数据进行额外加工的时候,可以直接在组件中调用commit方法触发mutations中的方法

【vue2】vuex的安装、配置与使用

四、配置

步骤一:新建文件夹store,文件夹下新建index.js文件

【vue2】vuex的安装、配置与使用

步骤二:index.js中完成配置:还没有配置数据和事件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 用来存储数据
const state = {
}
// 响应组件中的事件
const actions = {
}
// 操作数据
const mutations = {
}
// 用来将state数据进行加工
const getters = {
}
// 新建并暴露store
export default new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})

步骤三:main.js中引入

import Vue from 'vue'
import App from './App.vue'
import store from './store/index';
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

五、使用

5.1、常规写法

1、state

组件中使用$store.state.xxx获取值,例如:

<li v-for="p in $store.state.person" :key="p.id">
   姓名:{{ p.personName }} 年龄:{{ p.age }}
   <button @click="deletePerson(p.id)">删除</button>
</li>

vuex的index.js:

const state = {
    person: [
        { id: nanoid(), personName: "张三", age: 18 },
        { id: nanoid(), personName: "张4", age: 28 },
        { id: nanoid(), personName: "张5", age: 38 },
    ]
}

2、getter

组件中使用$store.getters.xxx获取getters中的返回值

<span> 学生年龄总和:{{ $store.getters.getAllPersonAge }} </span>

index.js:

// 用来将state数据进行加工:类似于computed
const getters = {
    getAllPersonAge(state) {
        var sumAge = 0;
        state.person.forEach(element => {
            sumAge += element.age
        });
        return sumAge
    }
}

3、actions

组件中使用this.$store.dispatch("aaa", xxx)触发actions中的aaa方法,参数为xxx

<input type="text" v-model="newPerson" />
<button @click="addPerson">添加</button>
addPerson() {
   if (this.newPerson == "") {
      alert("请输入姓名");
      return;
   }
   this.$store.dispatch("addPerson", this.newPerson);
   this.newPerson=""
},

index.js

// 响应组件中的事件
const actions = {
    //添加人员
    addPerson(content, value) {
        console.log(value)
        const person = {
            id: nanoid(),
            personName: value,
            age: 18//暂时写死
        }
        content.commit("addPerson", person)
    }
}

4、mutations

组件中:

<button @click="deletePerson(p.id)">删除</button>
deletePerson(id) {
      this.$store.commit("deletePerson", id);
},

index.js

const mutations = {
    addPerson(_, value) {
        this.state.person.unshift(value)
    },
    deletePerson(_, id) {
        const newArr = this.state.person.filter(p => {
            return p.id != id
        })
        this.state.person = newArr
    }
}

5.2 四个map写法

上述写法都需要手动写this.$store.xxx比较麻烦,可以在组件中引入vuex的四个map,简化操作

组件中引入:

import { mapState, mapActions, mapGetters, mapMutations } from "vuex";

使用:

computed: {
    ...mapState(["person"]),
    ...mapGetters(["getAllPersonAge"]),
},
methods: {
    ...mapActions({
    addPerson1: "addPerson",   //第一个为本地方法名,第二个参数为actions中的方法名
}),
    ...mapMutations(["deletePerson"]),//当本地和index.js中的方法名一致时,可以简化成数组写法
},

使用:直接使用上面中定义的参数名

  <input type="text" v-model="newPerson" />
    <button @click="addPerson1(newPerson)">添加</button>
    <ul>
      <li v-for="p in person" :key="p.id">
        姓名:{{ p.personName }} 年龄:{{ p.age }}
        <button @click="deletePerson(p.id)">删除</button>
      </li>
    </ul>
  <span> 学生年龄总和:{{ getAllPersonAge }} </span>

五、其他

以上就是vuex的所有介绍,我们一起进步。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。