vuex如何修改狀態(tài)state的方法

更新時間：2024年08月31日 09:44:42 作者：明月松江

這篇文章主要介紹了vuex如何修改狀態(tài)state的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vuex修改狀態(tài)state方法

vuex想要改變state里的屬性，官方推薦的方法是通過mutaion的方式修改state。

例如：

store.js

const state = {
  num:0
}
const mutations = {
  SET_NUM(state, payload) {
    state.num= payload;
  },
}
export default new Vuex.Store({
  state,
  mutations
})

<template>
  ...
</template>
<script>
  export default{
    data(){
      return{
        num:1
      }
    },
    methods:{
	  doSomething(){
	    this.$store.commit('SET_NUM',this.num);
	  }	
	}
  }
</script>

在組件里直接修改state也是生效的,例如：

 doSomething(){
   this.$store.state.num = this.num;
 }

但是不推薦這種直接修改state的方式，因為這樣不能使用vuex的瀏覽器插件來跟蹤狀態(tài)的變化，不利于調(diào)試。

vuex state使用/教程/實例

說明

本文用示例介紹Vuex的五大核心之一：state。

官網(wǎng)

State | Vuex
API 參考 | Vuex

state概述

單一狀態(tài)樹

Vuex 使用單一狀態(tài)樹：用一個對象就包含了全部的應(yīng)用層級狀態(tài)。它作為一個“唯一數(shù)據(jù)源。這也意味著，每個應(yīng)用將僅僅包含一個 store 實例。
單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個當(dāng)前應(yīng)用狀態(tài)的快照。
存儲在 Vuex 中的數(shù)據(jù)和 Vue 實例中的 data 遵循相同的規(guī)則，例如狀態(tài)對象必須是純粹 (plain) 的。

響應(yīng)式

state存放的數(shù)據(jù)是響應(yīng)式的：如果store的數(shù)據(jù)改變，依賴這個數(shù)據(jù)的組件也會更新。

用法

直接使用

// 在JS中使用
this.$store.state.變量名        // 不分模塊
this.$store.state.模塊名.變量名 // 分模塊//在模板上使用
$store.state.變量名        // 不分模塊
$store.state.模塊名.變量名 // 分模塊

mapState

import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState(['state屬性名'])              // 不分模塊，不修改屬性名
        ...mapState({'新屬性名稱':'state屬性名'}) // 不分模塊，修改屬性名
        ...mapState('模塊名', ['state屬性名'])    // 分模塊，不修改屬性名
    }
}

示例

代碼

CouterStore.js

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);
const counterStore = new Vuex.Store(
    {
        state: {
            count: 10
        },
    }
);export default counterStore;

Parent.vue

<template>
  <div class="outer">
    <h3>父組件</h3>
    <component-b></component-b>
  </div>
</template><script>
import ComponentB from "./ComponentB";export default {
  name: 'Parent',
  components: {ComponentB},
}
</script><style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

ComponentB.vue（組件）

<template>
  <div class="container">
    <h3>ComponentB</h3>
    計數(shù)器的值：{{thisCount}}
    <!--也可以這么寫：-->
    <!--計數(shù)器的值：{{this.$store.state.count}}-->
  </div>
</template><script>
export default {
  computed:{
    thisCount() {
      return this.$store.state.count;
    }
  }
}
</script><style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";Vue.use(Router)export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})

測試

訪問：http://localhost:8080/#/parent