vue2,vue3使用vuex

vuex vue的状态管理器
1引入vuex

npm install vuex

2.创建store/index.js文件 在main.js引入

import { createStore } from 'vuex'

const store = createStore({
    state: () => ({})
    })
export default store

3.state 核心, 用于定义数据

 state: () => ({
        count: 0,
        name: '陆青',
        age: 24,
        list: [
            {
                id: '111',
                name: '徐凤年',
                age: 24,
                content: '柿子'
            },
            {
                id: '222',
                name: '徐北枳',
                age: 25,
                content: '橘子'
            }
        ]
    }),

4.mutations 修改state 数据的唯一途径

 mutations: {
        addCount(state) {
            state.count++
        },
        setAge(state) {
            state.age = 18
        },
        getNameXfn(state, object) {
            state.list[0].id = object.id
            state.list[0].name = object.name
            state.list[0].age = object.age
            state.list[0].content = object.content
        },
        getNameXbz(state, names) {
            state.list[1].name = names
        }
    },

5.getters vuex的计算属性 （传参 state 与 getters）

getters: {
        bigCount(state) {
            return state.count + 200
        },
        allAge(state) {
            let ages = 0
            state.list.map(item => {
                ages += item.age
            })
            return ages
        },
        getName(state, getters) {
            return state.list[0].name + '和' + state.list[1].name + '两人加起来年龄是' + getters.allAge
        },
        getFun(state) {
            return function (id) {
                let obj = ''
                state.list.map(item => {
                    if (id == item.id) {
                        obj = item
                    }
                })
                return obj
            }
        }
    }

在vue2中使用
直接使用 $store.state.xxxx $store.getters.xxxx

<div>{{ $store.state.count }}</div>
<div>{{ $store.getters.bigCount }}</div>

映射使用
vue2

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  computed: {
    count1() {
      return this.$store.state.count;
    },
    ...mapState(["name", "age"]),
    ...mapState({
      fname: (state) => state.name,
      fage: (state) => state.age,
    }),
    ...mapGetters(["allAge", "bigCount", "getName"]),
    // ...mapMutations(["getNameXfn", "getNameXbz"]),
  },
  methods: {
    getNameXfn() {
      let obj = { id: "333", name: "徐雁兵", age: 30, content: "脸甲" };
      this.$store.commit("getNameXfn", obj);
    },
    getNameXbz() {
      this.$store.commit("getNameXbz", "陈锡亮");
    },
  },
};

vue3

<script setup>
import { toRefs } from "vue";
import { useStore } from "vuex";
const store = useStore();
function add() {
  store.commit("addCount");
}
const { count: count2, name: sname, age: sage } = toRefs(store.state);
const { allAge: setAllAge } = toRefs(store.getters);
function clickAge() {
  store.commit("setAge");
}
</script>

完整app.vue

<template>
  <div>
    <h1>app content</h1>
    <hr />
    <h3>计数器</h3>
    <div>{{ $store.state.count }}</div>
    <button @click="add">+1</button>
    <div>computed {{ count1 }}</div>
    <div>setup {{ count2 }}</div>
    <hr />
    <div>map数组形式 {{ name }}-{{ age }}</div>
    <div>map对象形式 {{ fname }}-{{ fage }}</div>
    <div>setup 形式 {{ sname }} - {{ sage }}</div>
    <button @click="clickAge">修改年龄</button>
    <hr />
    <div>{{ $store.getters.bigCount }}</div>
    <div>{{ $store.getters.allAge }}</div>
    <div>{{ $store.getters.getName }}</div>

    <hr />
    <div>{{ bigCount }}</div>
    <div>{{ allAge }}</div>
    <div>{{ getName }}</div>
    <hr />
    <div>{{ $store.getters.getFun("111") }}</div>
    <div>{{ $store.getters.getFun("333") }}</div>
    <div>{{ setAllAge }}</div>
    <hr />
    <button
      @click="
        getNameXfn({ id: '333', name: '徐雁兵', age: 30, content: '脸甲' })
      "
    >
      修改徐凤年信息
    </button>
    <button @click="getNameXbz({ names: '陈锡亮' })">修改徐北枳名称</button>
    <button @click="getNameXfn()">修改徐凤年信息</button>
    <button @click="getNameXbz()">修改徐北枳名称</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  computed: {
    count1() {
      return this.$store.state.count;
    },
    ...mapState(["name", "age"]),
    ...mapState({
      fname: (state) => state.name,
      fage: (state) => state.age,
    }),
    ...mapGetters(["allAge", "bigCount", "getName"]),
    // ...mapMutations(["getNameXfn", "getNameXbz"]),
  },
  methods: {
    getNameXfn() {
      let obj = { id: "333", name: "徐雁兵", age: 30, content: "脸甲" };
      this.$store.commit("getNameXfn", obj);
    },
    getNameXbz() {
      this.$store.commit("getNameXbz", "陈锡亮");
    },
  },
};
</script>
<script setup>
import { toRefs } from "vue";
import { useStore } from "vuex";
const store = useStore();
function add() {
  store.commit("addCount");
}
const { count: count2, name: sname, age: sage } = toRefs(store.state);
const { allAge: setAllAge } = toRefs(store.getters);
function clickAge() {
  store.commit("setAge");
}
</script>

<style>
</style>