vuex
<p>使用state的值：</p>
<pre><code class="language-javascript">import {
createStore
} from &quot;vuex&quot;;
export default createStore({
state: {
todoList: [
{
id: 1,
done: true
},
{
id: 2,
done: false
},
{
id: 3,
done: true
},
]
},
getters: {},
mutations: {},
actions: {},
modules: {},
});</code></pre>
<pre><code class="language-javascript">&lt;script setup&gt;
import { useStore } from &quot;vuex&quot;;
const store = useStore();
console.log(store.state.todoList[0].id); // 1
&lt;/script&gt;</code></pre>
<p>使用getters的值：</p>
<pre><code class="language-javascript">import {
createStore
} from &quot;vuex&quot;;
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) =&gt; item.done)
}
},
mutations: {},
actions: {},
modules: {},
});</code></pre>
<pre><code class="language-javascript">&lt;script setup&gt;
import { useStore } from &quot;vuex&quot;;
const store = useStore();
console.log(store.getters.todoListDone);
&lt;/script&gt;</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=47d3be93c50a040167144d53eea00bd0" alt="" />
使用getters传参：</p>
<pre><code class="language-javascript">import {
createStore
} from &quot;vuex&quot;;
export default createStore({
state: {
todoList: [{
id: 1,
done: true
},
{
id: 2,
done: false
},
{
id: 3,
done: true
},
]
},
getters: {
getResultbyId: (state) =&gt; (id) =&gt; {
return state.todoList.find(item =&gt; item.id === id)
}
},
mutations: {},
actions: {},
modules: {},
});</code></pre>
<pre><code class="language-javascript">&lt;script setup&gt;
import { useStore } from &quot;vuex&quot;;
const store = useStore();
console.log(store.getters.getResultbyId(2)); // {id: 2, done: false}
&lt;/script&gt;</code></pre>
<p>mutation：（唯一能更改state的人）</p>
<pre><code class="language-javascript">import {
createStore
} from &quot;vuex&quot;;
export default createStore({
state: {
age: &quot;&quot;
},
getters: {},
mutations: {
setAge(state, newage) {
state.age = newage
}
},
actions: {},
modules: {},
});</code></pre>
<pre><code class="language-javascript">&lt;script setup&gt;
import { useStore } from &quot;vuex&quot;;
const store = useStore();
let age = &quot;21&quot;;
store.commit(&quot;setAge&quot;, age);
// 别的组件都可以读到state中的age是21
console.log(store.state.age); // 21
&lt;/script&gt;</code></pre>
<p>mutation：commit 的第二个参数是对象</p>
<pre><code class="language-javascript">&lt;script setup&gt;
import { useStore } from &quot;vuex&quot;;
const store = useStore();
store.commit(&quot;setInfo&quot;, {
name: &quot;Andy&quot;,
age: 21,
});
console.log(store.state.person); // {name: &quot;Andy&quot;, age: 21}
&lt;/script&gt;</code></pre>
<pre><code class="language-javascript">import {
createStore
} from &quot;vuex&quot;;
export default createStore({
state: {
person: {
name: &quot;&quot;,
age: &quot;&quot;,
}
},
getters: {},
mutations: {
setInfo(state, payload) {
state.person.name = payload.name
state.person.age = payload.age
}
},
actions: {},
modules: {},
});</code></pre>
<p>mutation：直接 commit一个对象，方法名的字段固定是 type</p>
<pre><code class="language-javascript">&lt;script setup&gt;
import { useStore } from &quot;vuex&quot;;
const store = useStore();
store.commit({
type: &quot;setInfo&quot;,
name: &quot;Andy&quot;,
age: 21,
});
console.log(store.state.person); // {name: &quot;Andy&quot;, age: 21}
&lt;/script&gt;</code></pre>