vue-vuex-sate的使用

• src/store/index.js设置内容

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

Vue.use(Vuex)

export default new Vuex.Store({
  // data
  state: {
    num: 0,
    age: 18,
    msg: "haha"
  },
  //  methods,处理state
  mutations: {
    addNum(state) {
      state.num++
    },
    setNum(state, value) {
      state.num = value
    }
  },
  //  异步方法,如ajax
  actions: {
  },
  modules: {
  }
})

• src/route/index.js引用组件

import StateView from '../views/StateView.vue'
const routes = [
  {
   ....
  {
    path: '/state',
    name:"StateView",
    component: StateView
  }

• src/views/StateView.vue组件

<template>
    <div class="content">
        <h1>信息：{{msg}}</h1>
        <h2>数字：{{num}}</h2>
        <input type="text" :value="num" @input="addEvent" />
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {}
    },
    // 采用mapState的方式来引用，而不是之前采用this.$store.state.num
    computed: mapState(['msg','num']),
    methods: {
        addEvent:function(e){
            this.$store.commit("setNum",e.target.value)
        }
    }
}
</script>

image.png

• 其他使用方法参考官网