vue中state的用法

在Vue中，通常使用Vuex来管理应用程序的状态。Vuex是一个专为Vue.js应用程序开发的状态管理模式，它集中式地存储所有组件的状态，并且以相应的规则保证状态以一种可预测的方式发生变化。在Vuex中，有一个名为state的对象，它包含应用程序中的所有状态。以下是在Vue中使用state的基本步骤：

1. 安装Vuex：使用npm或yarn安装Vuex。

npm install vuex --save

2. 创建store：创建一个新的Vuex.Store实例，并将其传递给Vue实例。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

new Vue({
  el: '#app',
  store,
  // ...
})

3. 使用state：在组件中使用mapState辅助函数来获取state中的值。

import { mapState } from 'vuex'

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

4. 修改state：使用mutations修改state中的值。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

// 在组件中触发mutation
this.$store.commit('increment')

以上就是在Vue中使用state的基本步骤。需要注意的是，state应该是只读的，只能通过mutations修改其值。