Vue 开发实战生态篇 # 16：如何在Vue中使用Vuex

Posted 2022-09-19 凯小默

说明

【Vue 开发实战】学习笔记。

新建工程

vue create vuex-demo

安装依赖

进入 vuex-demo 文件夹，安装 vuex

npm i vuex@3.1.0

修改main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)
Vue.config.productionTip = false

const store = new Vuex.Store(
  state: 
    count: 0,
  ,
  mutations: 
    increment(state) 
      state.count++
    
  ,
  // 异步操作   
  actions: 
    increment(commit) 
      setTimeout(()=>
        // state.count++ // 不要对state进行更改操作，应该通过commit交给mutations去处理
        commit('increment')
      , 2000)
    
  ,
  // 类似计算属性   
  getters: 
    doubleCount(state) 
      return state.count * 2
    
  
)

new Vue(
  store,
  render: h => h(App),
).$mount('#app')

修改 App.vue

<template>
  <div id="app">
    <h1>count：count</h1>
    <h2>doubleCount：$store.getters.doubleCount</h2>
    <button @click="$store.commit('increment')">commit：count++</button>
    <button @click="$store.dispatch('increment')">dispatch：count++</button>
  </div>
</template>

<script>

export default 
  name: 'app',
  computed: 
    count() 
      return this.$store.state.count
    
  

</script>

<style>
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

效果可以自己手动试试：