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.idstate.list[0].name = object.namestate.list[0].age = object.agestate.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 = 0state.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>