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>