vue-cli学习-Vuex安装和使用

Vuex安装使用

与Router相似，在安装脚手架是选择Vuex插件即可
Vuex有两个特性：1.它是响应式的；2.不能直接改变 store 状态；
安装好后，会在src创建store/index.js

export default new Vuex.Store({
    state: {}, //状态值
    mutations: {}, //修改状态
    actions: {}, //接口异步请求，服务端请求数据
    modules: {}
})

使用Vuex实现全局共享的计数器

//store/index.js
export default new Vuex.Store({
  state: {
    count:0
  },//状态值
  mutations: {
    increment(state){
      state.count++
    }
  },//修改状态
  actions: {
  },//接口异步请求，服务端请求数据
  modules: {
  }
})
//About.vue
<template>
  <div class="about">
    <h1>This is an about page 共享: {{$store.state.count}}</h1>
    <button @click="increment">共享+</button>
  </div>
</template>

<script>
    export default {
      methods:{
        increment(){
          this.$store.commit('increment')
        }
      }
    }
</script>

1. $store 是插件挂载在 Vue 实例上的，在实例内访问用 this.$store
2. 单向循环图中可以看到 commit 字样，表示执行 mutations 用commit
3. 为何要使用 mutation 方法，是因为我们要明确追踪状态的变化，如果直接修改，则无；

this.$store.state.count++ //修改这里解释了特性第 2 点