vuex之state、Mutations、getters、actions、modules

最新推荐文章于 2023-10-25 16:28:48 发布

原创最新推荐文章于 2023-10-25 16:28:48 发布 · 500 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#state #actions #getters #mutations #modules

Vue 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了Vue.js应用中使用Vuex进行状态管理的方法，包括状态（state）、提交（mutations）、获取器（getters）及操作（actions）的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

state
1.文件创建
当然，文件创建的位置自己可以定，本文例子都在src文件夹下进行创建。
main.js

import Vue from 'vue'
import store from './store'
import vuex_test from './vuex_test.vue'


new Vue({
  el:'#app',
  store,
  render:xx=>xx(vuex_test)
})

vuex_test.vue

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{$store.state.count}}----------{{count}}</p>
  </div>
</template>
<script>
  export  default {
    name : 'app',
    data() {
      return {
        count : 0       // 计算属性名称不能与data中定义的数据相同 The computed property "count" is already defined in data.
      }
    }
  }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

export default new Vuex.Store({
  state

})

最基本的用法{{$store.state.count}}引用，显示结果：
在这里插入图片描述
其他方式引用1：
vuex_test.vue中添加：

computed : {
      count(){
        return this.$store.state.count+2
      }
    }

哦豁，报错了，让我们看下错误：

vue.esm.js?c5de:628 [Vue warn]: The computed property "count" is already defined in data.
found in
---> <App> at src/vuex_test.vue
       <Root>

在这里插入图片描述
然后我百度了下原因：
Vue binds all properties in the data method to the root of the instance. It also does this for computed properties, and methods, so you must use different names to avoid naming conflicts.
The main problem in the code you posted is that you have naming conflicts with every data property. In fact, because you are using a Vuex store, you don’t need the data properties at all, just the computed properties.
翻译过来是：
VUE将数据方法中的所有属性绑定到实例的根。它还对计算的属性和方法执行此操作，因此您必须使用不同的名称来避免命名冲突。
您发布的代码中的主要问题是，您与每个数据属性都存在命名冲突。实际上，因为您使用的是Vuex存储，所以根本不需要数据属性，只需要计算的属性。

大概意思就是data中的count和computed中的count命名冲突了，咱们只用到计算属性了，所以data中去掉，他出现的本地也只是为了给｛｛count｝｝赋初值而已。

去掉后，看结果：

在这里插入图片描述
其他方式引用2：
vuex_test.vue中添加：

computed:mapState({
      // count:state => state.count
      count:function (state) {
        return state.count
      }
    })

另外记得引用mapState

import { mapState } from 'vuex'

在这里插入图片描述
剩下一种其实类似于上面，适应于只显示不变更数据的情况：

//辅助函数，映射this.count到$stote.state.count
    // computed:mapState([
    //   "count"
    // ]),

    computed: {
      ...mapState([
        'count'
      ])
    }

注意上面第一种为直接数组的格式，第二种为标准语法，三个点去掉就报错滴
在这里插入图片描述

这就是获取store中的state数据并显示的几种情况，切记，多个computed时只有一个会生效，默认最后一个生效，本文例子记得将原来的覆盖或者注释掉

接下来便是Mutations触发状态的用法：
store.js文件中规定Mutations中几种规则并下方调用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

export default new Vuex.Store({
  state,
  mutations

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations } from 'vuex'
  export  default {
    name : 'app',
    computed: {
      ...mapState([
        'count'
      ])
    },
    // methods:mapMutations([
    //   'addNumber',
    //   'delNumber'
    // ])
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ])
    }
  }
</script>

运行结果：
在这里插入图片描述

getters的用法：
store.js中修改添加：

const getters = {
  count:function(state){
    return state.count += 100
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ])
    }
  }
</script>

运行结果：
在这里插入图片描述

action异步加载：
store.js中添加： getters中暂且设置为0

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

const getters = {
  count:function(state){
    return state.count += 0
  }
}

const actions = {
  addNumberP(context){
    context.commit('addNumberByObject',{a:5,b:10}),
      setTimeout(() =>{
        context.commit('delNumber')
      },3000)
    console.log("本条语句先与计时器被执行")
  },
  delNumberP({commit}){
    commit('delNumber')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
    <p>
      <button @click="addNumberP">actions-addNumberP</button>
      <button @click="delNumberP">actions-delNumberP</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ]),
        ...mapActions({
            addNumberP:'addNumberP',
            delNumberP:'delNumberP'
          })
      }
  }
</script>

在这里插入图片描述
执行结果：
先计数成为15，然后执行log输出，最后count-1变成14

附完整代码：
store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

const getters = {
  count:function(state){
    return state.count += 0
  }
}

const actions = {
  addNumberP(context){
    context.commit('addNumberByObject',{a:5,b:10}),
      setTimeout(() =>{
        context.commit('delNumber')
      },3000)
    console.log("本条语句先与计时器被执行"+new Date())
  },
  delNumberP({commit}){
    commit('delNumber')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions

})

vuex_test.vue

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
    <p>
      <button @click="addNumberP">actions-addNumberP</button>
      <button @click="delNumberP">actions-delNumberP</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ]),
        ...mapActions({
            addNumberP:'addNumberP',
            delNumberP:'delNumberP'
          })
      }
  }
</script>

模版的简单用法：
在这里插入图片描述