vuex中state单一状态案例

准备

• 环境安装：在项目文件夹下执行 npm install vuex --save

• src下创建store文件夹和index.js文件
  

• main.js如下

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

Vue.config.productionTip = false

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

• src/store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        counter: 100
    },
    mutations: {
        increment(state){
            state.counter++
        },
        decrement(state){
            state.counter--
        }
    },
    actions: {

    },
    getters: {

    },
    modules: {
        
    }
})

export default store

App.vue 组件

• $store.state.属性 的方式来访问保存的状态（如：counter）
• $store.commit(‘methodName’) 来修改状态

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <h2>--------------下面为HelloVuex--------------------</h2>
    <HelloVuex/>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
  name: 'App',
  components: {
    HelloVuex
  },
  data() {
    return {
      message: '我是App组件'
    }
  },
  methods: {
    addition() {
      this.$store.commit('increment')
    },
    subtraction() {
      this.$store.commit('decrement')
    }
  }
}
</script>
<style>
</style>

HelloVuex.vue 组件

<template>
  <div id="helloVuex">
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
  </div>       
</template>    

<script>
  export default {
    name: "HelloVuex",  
    data() {    
        return {
            message: '我是HelloVuex组件'
        }       
    }
}

</script>
               
<style scoped>
</style>

效果展示

注意事项

• 我们通过提交mutation的方式,而非直接改变$store.state.counter。
• 这是因为Vuex可以更加明确的追踪状态的变化，所以不要直接改变$store.state.counter的值