超簡單入門Vuex小示例

寫在前面

本文轉載自掘金上面的一篇博客，原文地址爲：超簡單入門Vuex小示例，項目源代碼我已經託管到github上面，源代碼地址爲：https://github.com/ccf19881030/vuexexample，碼雲地址爲：https://gitee.com/havealex/vuexexample
你可以使用git命令從github上獲取vuexexample源代碼

git clone https://github.com/ccf19881030/vuexexample.git

從碼雲上獲vuexexample取代碼：

git clone https://gitee.com/havealex/vuexexample.git

本文旨在通過一個簡單的例子，練習vuex的幾個常用方法，使初學者以最快的速度跑起來一個vue + vuex的示例。

學習vuex需要你知道vue的一些基礎知識和用法。相信點開本文的同學都具備這個基礎。

另外對vuex已經比較熟悉的大佬可以忽略本文。

生成基於vue的項目

前提是在自己的系統中安裝好了Node.js、npm、cnpm等工具，並且配置好了相關的環境變量，然後選擇一個趁手的IDE編輯器，我使用的是VSCode。
基於vue-cli腳手架生成一個vue項目，vue-cli是Vue.js 開發的標準工具。
目前vue-cli腳手架已經更新到4.3.1版本，和之前Vue-cli 2.x版本創建項目的方式有一點不同，具體可以參考Vue CLI官網
使用vue-cli 4.x安裝@vue/cli依賴，如下：

起步

安裝

npm install -g @vue/cli
# OR
yarn global add @vue/cli

創建一個項目：

vue create my-project
# OR
vue ui

vue-cli 4.x提供了兩種創建vue項目的方式，使用vue create命令可以使用命令行創建vue項目，而使用vue ui命令則可以通過ui界面創建vue項目。

關於vue-cli 4.x創建vue項目可以參考創建一個項目，關於老版本的 vue-cli 文檔請移步這裏
本人使用的是Windows10操作系統，使用VSCode編輯器,使用的node、npm、cnpm、vue-cli版本信息如下圖所示：

vue create

運行以下命令來創建一個新項目vuexexample：

vue create vuexexample

你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。

選擇默認的default (babel, eslint)選項，接着會創建一個基本的vue項目結構，如下圖所示：

然後按上圖執行項目，進入vuexexample項目根目錄並使用npm run serve命令啓動vuexexample項目：

cd vuexexample
npm run serve

打開瀏覽器如Chrome，在地址欄中輸入http://localhost:8080，項目如下圖所示:

vue create 命令有一些可選項，你可以通過運行以下命令進行探索：

vue create --help

用法：create [options] <app-name>

創建一個由 `vue-cli-service` 提供支持的新項目


選項：

  -p, --preset <presetName>       忽略提示符並使用已保存的或遠程的預設選項
  -d, --default                   忽略提示符並使用默認預設選項
  -i, --inlinePreset <json>       忽略提示符並使用內聯的 JSON 字符串預設選項
  -m, --packageManager <command>  在安裝依賴時使用指定的 npm 客戶端
  -r, --registry <url>            在安裝依賴時使用指定的 npm registry
  -g, --git [message]             強制 / 跳過 git 初始化，並可選的指定初始化提交信息
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠程預設選項
  -x, --proxy                     使用指定的代理創建項目
  -b, --bare                      創建項目時省略默認組件中的新手指導信息
  -h, --help                      輸出使用幫助信息

使用圖形化界面

你也可以通過 vue ui 命令以圖形化界面創建和管理項目：

vue ui

上述命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目創建的流程。

按上圖所示：打開瀏覽器在地址欄中輸入http://localhost:8000
使用圖形用戶界面創建vue項目，如下圖所示：

打開【vue項目管理器】，選擇項目所在目錄，創建一個項目vuexexample，並且安裝相應的依賴。

如上圖所示，項目名稱爲vuexexample2，所在目錄爲：F:\rate\nodeWeb\vuex_demo
點擊右下角的【下一步】，

選擇默認的預設：babel,eslint，再點擊右下角的【創建項目】

對應的命令行中會運行創建項目的命令，創建項目模板。

進入項目目錄，使用npm run serve先試着跑一下。

一般不會出現問題，試跑成功後，就可以寫我們的vuex程序了。

使用vue完成的示例

安裝vuex

使用VScode工具打開剛創建的vuexexample項目，如下圖所示：

使用vuex首先得安裝vuex，在VSCode中打開終端，進入到vuexexample根目錄，執行如下命令：

cnpm install vuex --save

介紹一下我們的超簡單Demo，一個父組件Parent，一個子組件Child，父組件有一個數據，子組件有一個數據，想要將這兩個數據都放置到vuex的state中，然後父組件可以修改自己的和子組件的數據。子組件可以修改父組件和自己的數據。

代碼文件介紹

store/index.js文件
在根目錄src目錄下創建一個store文件夾，然後新建一個index.js文件，源代碼如下：

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

Vue.use(Vuex)

const state = {
    parentText: '父組件原始文本',
    childText:"子組件原始文本"
}

const mutations = {
    changeParentText(state, str){
        state.parentText = str;
    },
    changeChildText(state, str){
        state.childText = str;
    }
}

const store = new Vuex.Store({
    state: state,
    mutations: mutations
})

export default store;

然後在components目錄下刪除HelloWorld.vue，創建Parent.vue和Child.vue這兩個文件。

Parent.vue組件

<template>
    <div class="parent">
        <h3>這裏是父組件</h3>
        <button type="button" @click="onChangeParentText">修改自己文本</button>
        <button type="button" @click="onChangeChildText">修改子組件文本</button>
        <div>ParentText: {{ msg }}  </div>
        <child></child>
    </div>
</template>

<script>
    import Child from './Child.vue'

export default {
   computed: {
       msg () {
           return this.$store.state.parentText;
       }
   },
   methods: {
       onChangeParentText() {
           this.$store.commit('changeParentText', '父組件修改自己後的文本');
       },
       onChangeChildText() {
           this.$store.commit('changeChildText', '父組件修改子組件後的文本');
       }
   },
   components: {
       'child': Child
   }
}
</script>

<style scoped>
    .parent{
        background-color: #00BBFF;
        height: 400px;
    }
</style>

Child.vue子組件

<template>
    <div class="child">
        <h3>這裏是子組件</h3>
        <div>childText: {{msg}}</div>
        <button type="button" @click="onChangeParentText">修改父組件文本</button>
        <button type="button" @click="onChangeChildText">修改自己文本</button>
    </div>
</template>

<script>
    export default {
        name: "Child",
        computed:{
            msg(){
                return this.$store.state.childText;
            }
        },
        methods: {
            onChangeParentText(){
                this.$store.commit("changeParentText", "子組件修改父組件後的文本");
            },
            onChangeChildText(){
                this.$store.commit("changeChildText", "子組件修改自己後的文本");
            }
        }
    }
</script>

<style scoped>
    .child{
        background-color: palegreen;
        border:1px solid black;
        height:200px;
        margin:10px;
    }
</style>

修改App.vue
將HelloWorld.vue組件移除掉，換成Parent.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Parent msg="Welcome to Your Vue.js App"></Parent>
  </div>
</template>

<script>
import Parent from './components/Parent.vue'

export default {
  name: 'App',
  components: {
    Parent
  }
}
</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>

main.js
修改main.js文件，引入store/index.js，並將vuex注入到Vue實例中，這樣在Parent.vue和Child.vue組件中可以使用vuex做狀態提交等操作。

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

Vue.config.productionTip = false

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

運行vuexexample項目

npm run serve

最終項目的運行初始效果圖如下圖所示：

如果想通過父組件觸發子組件的數據，就點“改變子組件文本”按鈕，點擊後效果如下：
如果想通過子組件修改父組件的數據，就在子組件點擊“修改父組件文本”按鈕，點擊後效果如下：

後記

通過該vuex示例，瞭解vuex的常用配置及方法調用。希望對不怎麼熟悉vuex的同學快速上手vuex項目有點幫助。
編程重在實踐，趕緊去跑一下吧。
爲了方便，我將完整的項目上傳到github上，源代碼地址爲：https://github.com/ccf19881030/vuexexample，，碼雲地址爲：https://gitee.com/havealex/vuexexample

你可以使用git命令從github上獲取源代碼

git clone https://github.com/ccf19881030/vuexexample.git

從碼雲上獲取項目源代碼：

git clone https://gitee.com/havealex/vuexexample.git

參考資料

超簡單入門Vuex小示例
超級簡單入門vuex 小實例
Vue CLI
https://github.com/vuejs/vue-cli
Standard Tooling for Vue.js Development https://cli.vuejs.org/
Vue.js官網
vuex
Awesome Vue packages
awesome-vue
A curated list of awesome things related to Vue.js

超簡單入門Vuex小示例

寫在前面

生成基於vue的項目

起步

vue create

使用圖形化界面

使用vue完成的示例

安裝vuex

代碼文件介紹

運行vuexexample項目

後記

參考資料

SQL優化-20231016

一些常用開發軟件下載地址-msdn.itellyou.cn

Nest.js學習資料

Javascript相關學習

PM2快速入門

Object 對象-JavaScript教程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結