vuex

使用state的值：

import {
  createStore
} from "vuex";

export default createStore({
  state: {
    todoList: [
      {
        id: 1,
        done: true
      },
      {
        id: 2,
        done: false
      },
      {
        id: 3,
        done: true
      },
    ]
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

<script setup>
import { useStore } from "vuex";
const store = useStore();
console.log(store.state.todoList[0].id);        // 1
</script>

使用getters的值：

import {
  createStore
} from "vuex";

export default createStore({
  state: {
    todoList: [
      {
        id: 1,
        done: true
      },
      {
        id: 2,
        done: false
      },
      {
        id: 3,
        done: true
      },
    ]
  },
  getters: {
    todoListDone(state) {
      return state.todoList.filter((item) => item.done)
    }
  },
  mutations: {},
  actions: {},
  modules: {},
});

<script setup>
import { useStore } from "vuex";
const store = useStore();
console.log(store.getters.todoListDone);
</script>

使用getters传参：

import {
  createStore
} from "vuex";

export default createStore({
  state: {
    todoList: [{
        id: 1,
        done: true
      },
      {
        id: 2,
        done: false
      },
      {
        id: 3,
        done: true
      },
    ]
  },
  getters: {
    getResultbyId: (state) => (id) => {
      return state.todoList.find(item => item.id === id)
    }
  },
  mutations: {},
  actions: {},
  modules: {},
});

<script setup>
import { useStore } from "vuex";
const store = useStore();
console.log(store.getters.getResultbyId(2));    // {id: 2, done: false}
</script>

mutation：（唯一能更改state的人）

import {
  createStore
} from "vuex";

export default createStore({
  state: {
    age: ""
  },
  getters: {},
  mutations: {
    setAge(state, newage) {
      state.age = newage
    }
  },
  actions: {},
  modules: {},
});

<script setup>
import { useStore } from "vuex";
const store = useStore();
let age = "21";
store.commit("setAge", age);

// 别的组件都可以读到state中的age是21
console.log(store.state.age);   // 21
</script>

mutation：commit 的第二个参数是对象

<script setup>
import { useStore } from "vuex";
const store = useStore();

store.commit("setInfo", {
  name: "Andy",
  age: 21,
});

console.log(store.state.person);    // {name: "Andy", age: 21}
</script>

import {
  createStore
} from "vuex";

export default createStore({
  state: {
    person: {
      name: "",
      age: "",
    }
  },
  getters: {},
  mutations: {
    setInfo(state, payload) {
      state.person.name = payload.name
      state.person.age = payload.age
    }
  },
  actions: {},
  modules: {},
});

mutation：直接 commit一个对象，方法名的字段固定是 type

<script setup>
import { useStore } from "vuex";
const store = useStore();

store.commit({
  type: "setInfo",
  name: "Andy",
  age: 21,
});

console.log(store.state.person);    // {name: "Andy", age: 21}
</script>