vuex 设置state

在Vuex中设置state，需要先在store.js文件中定义一个对象，即store，它包含state、mutations、actions和getters等属性。state属性是状态对象，用于存储应用程序的所有状态，例如用户信息、页面状态等。

在定义state时，需要使用Vue提供的响应式API，即Vue.set()方法，将对象设置为响应式对象。下面是一个简单的示例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

在上面的示例中，state对象包含一个count属性，初始值为0。mutations属性包含一个increment方法，用于增加count的值。在mutations中，我们直接修改state对象的值，因为Vuex要求我们只能在mutations中修改state，以确保状态的可追踪性。

当我们需要使用state时，可以在组件中使用Vuex提供的辅助函数mapState将state映射到组件的计算属性中，以便在模板中使用。

// 组件中
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
}

在上面的示例中，我们使用mapState将store中的count属性映射到组件的计算属性中，以便在模板中使用。我们还定义了一个increment方法，当点击按钮时，调用$store.commit方法来调用increment方法，从而增加count的值。