Vuex入門簡單示例（一）

前言

我想寫一系列關於Vuex的入門文章，我是看着vuex官網文檔，結合自己從零搭建的vue項目來實踐vuex的知識。

Vuex入門系列：

• Vuex入門簡單示例（一）

• Vuex入門簡單示例（二）

• Vuex入門簡單示例（三）

• Vuex入門簡單示例（四）

• Vuex入門簡單示例（五）

 

本文涉及知識點：

1. vue cli3快速構建項目
2. 安裝vuex
3. 如何在項目中使用vuex

 

使用vue cli3構建一個簡單的vue項目

vue create vuex-example

安裝成功后按提示，進入項目根目錄

cd vuex-example

 

安裝vuex

yarn add vuex

此時項目結構和package.json如下所示：

 

創建store.js

在src目錄（對，就是跟main.js並列的位置）創建一個js文件store.js

1.引入vue和vuex

src/store.js

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

Vue.use(Vuex)

2.創建Vuex對象實例

// ...
// 接着上面的代碼

const state = {
    count: 0
}

export default new Vuex.Store({
    state
})

 

在main.js引入store.js

src/main.js

// ...
import store from './store'
// ...

// 在vue實例添加store
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

至此，你就可以在.vue文件中使用store的數據了

 

改造下App.vue

1.刪掉<div id="app"></div>中的代碼

2.刪掉組件HelloWorld相關代碼

3.使用$store調用store中的數據

src/App.vue

<template>
  <div id="app">
    count: {{ $store.state.count }}
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>

</style>

 

運行項目

yarn run serve

能看到成功顯示了count的值

 

 

參考文檔 Vuex官方中文文檔