vuex如何修改状态state的方法

林祥得

vuex修改状态state方法

vuex想要改变state里的属性，官方推荐的方法是通过mutaion的方式修改state。
例如：
store.js

1. const state = {
   
2.   num:0
   
3. }
   
4. const mutations = {
   
5.   SET_NUM(state, payload) {
   
6.     state.num= payload;
   
7.   },
   
8. }
   
9. export default new Vuex.Store({
   
10.   state,
    
11.   mutations
    
12. })

复制代码

1. <template>
   
2.   ...
   
3. </template>
   
4. <script>
   
5.   export default{
   
6.     data(){
   
7.       return{
   
8.         num:1
   
9.       }
   
10.     },
    
11.     methods:{
    
12.           doSomething(){
    
13.             this.$store.commit('SET_NUM',this.num);
    
14.           }       
    
15.         }
    
16.   }
    
17. </script>

复制代码

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

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

复制代码

但是不推荐这种直接修改state的方式，因为这样不能使用vuex的浏览器插件来跟踪状态的变化，不利于调试。

vuex state使用/教程/实例

说明

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

官网

• State | Vuex
  
• API 参考 | Vuex
  

state概述

单一状态树

• Vuex 使用单一状态树：用一个对象就包含了全部的应用层级状态。它作为一个“唯一数据源。这也意味着，每个应用将仅仅包含一个 store 实例。
  
• 单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
  
• 存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的。
  

响应式
state存放的数据是响应式的：如果store的数据改变，依赖这个数据的组件也会更新。

用法

直接使用

1. // 在JS中使用
   
2. this.$store.state.变量名        // 不分模块
   
3. this.$store.state.模块名.变量名 // 分模块//在模板上使用
   
4. $store.state.变量名        // 不分模块
   
5. $store.state.模块名.变量名 // 分模块

复制代码

mapState

1. import { mapState } from 'vuex'
   
2. export default {
   
3.     computed: {
   
4.         ...mapState(['state属性名'])              // 不分模块，不修改属性名
   
5.         ...mapState({'新属性名称':'state属性名'}) // 不分模块，修改属性名
   
6.         ...mapState('模块名', ['state属性名'])    // 分模块，不修改属性名
   
7.     }
   
8. }

复制代码

示例

代码
CouterStore.js

1. import Vue from 'vue';
   
2. import Vuex from 'vuex';Vue.use(Vuex);
   
3. const counterStore = new Vuex.Store(
   
4.     {
   
5.         state: {
   
6.             count: 10
   
7.         },
   
8.     }
   
9. );export default counterStore;

复制代码

Parent.vue

1. <template>
   
2.   <div class="outer">
   
3.     <h3>父组件</h3>
   
4.     <component-b></component-b>
   
5.   </div>
   
6. </template><script>
   
7. import ComponentB from "./ComponentB";export default {
   
8.   name: 'Parent',
   
9.   components: {ComponentB},
   
10. }
    
11. </script><style scoped>
    
12. .outer {
    
13.   margin: 20px;
    
14.   border: 2px solid red;
    
15.   padding: 20px;
    
16. }
    
17. </style>

复制代码

ComponentB.vue（组件）

1. <template>
   
2.   <div class="container">
   
3.     <h3>ComponentB</h3>
   
4.     计数器的值：{{thisCount}}
   
5.     <!--也可以这么写：-->
   
6.     <!--计数器的值：{{this.$store.state.count}}-->
   
7.   </div>
   
8. </template><script>
   
9. export default {
   
10.   computed:{
    
11.     thisCount() {
    
12.       return this.$store.state.count;
    
13.     }
    
14.   }
    
15. }
    
16. </script><style scoped>
    
17. .container {
    
18.   margin: 20px;
    
19.   border: 2px solid blue;
    
20.   padding: 20px;
    
21. }
    
22. </style>

复制代码

路由（router/index.js）

1. import Vue from 'vue'
   
2. import Router from 'vue-router'
   
3. import Parent from "../components/Parent";Vue.use(Router)export default new Router({
   
4.   routes: [
   
5.     {
   
6.       path: '/parent',
   
7.       name: 'Parent',
   
8.       component: Parent,
   
9.     }
   
10.   ],
    
11. })

复制代码

测试
访问：http://localhost:8080/#/parent

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326754uho.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！