vue-vuex

好好學習，天天向下

注：基於vue-cli3及以上版本

一、安裝 VUE-CLI

①首先檢查自己電腦上的node版本（node版本大於等於8.9纔可以使用cli3）

node -v

mac

• 如果版本不符合需求，先使用安裝命令npm i -g n（如果報錯可換爲npm i -g n --force）
• 然後升級node版本
  • 安裝指定版本 n 版本號（n 10.0.0）
  • 安裝最新版本 n latest
  • 安裝最近的穩定版本 n stable

window

這個就比較簡單了，直接去官網下安裝包（有各種版本）然後安裝一遍就ok了

②檢查自己的腳手架版本是否大於或等於cli3

vue -V

• 安裝新的cli需要把之前安裝的卸載了npm uninstall vue-cli -g
• 然後就可以安裝了npm install -g @vue/cli

③然後就是使用圖形界面來創建項目

• 使用vue -ui命令打開vue-cli項目管理界面
  

• 創建一個新的項目
  
  然後靜靜的等他創建完，

• 每個欄目的用處（這裏我就不細說了，有興趣的可以自己慢慢看）
  

二、使用vue-vuex

① 安裝vue-vuex，直接使用上述的添加插件功能，搜索vuex，添加安裝

② cli3的倉庫已經將state，getters，actions，mutations，modules合併到一個js文件中

• state 基本數據定義的地方
• getters 從基本數據派生出來的數據（對基本數據進行操作後的數據）
• actions 像一個裝飾器，包裹mutations，使其可以異步
• mutations 提交更改數據的方法，同步
• modules 模塊化vuex

③上代碼

main.js：

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0,
        todos: [
            {id: 1, text: '你', done: true},
            {id: 2, text: '我', done: true},
            {id: 3, text: '他', done: false}
        ],
        bankName: '中國銀行'
    },
    mutations: {
        increase(state) {
            state.count++;
        },
        subtract(state) {
            state.count--;
        },
        newBankName: (state, msg) => {
            state.bankName = msg;
        }
    },
    actions: {
        actionIncrease({commit}) {
            commit('increase');
        },
        actionSubtract({commit}) {
            commit('subtract');
        }
    },
    getters: {
        doneTodos: state => {//通過方法訪問
            return state.todos.filter(todo => todo.done);
        },
        doneTodosCount: ((state, getters) => {//通過屬性訪問
            return getters.doneTodos.length;
        }),
        bankName: state => {
            return state.bankName;
        }
    },
    modules: {}
})

調用倉庫的文件

<template>
    <div class="main">
        <el-button @click="addNumber">+</el-button>
        <el-input :value="count"></el-input>
        <el-button @click="lessNumber">-</el-button>
        <el-button @click="newBankName">commit</el-button>
        <br>
        {{todoes}}****
        {{doneTodosCounts()}}****
        {{doneTodos}}****
        {{doneTodosCount}}****
        {{bankName}}
    </div>
</template>

<script>
    import {mapGetters} from "vuex";

    export default {
        name: "Vuex",
        data() {
            return {}
        },
        computed: {
            count() {
                return this.$store.state.count;
            },
            todoes() {
                return this.$store.getters.doneTodos;
            },
            //直接獲取store中getters方法所返回的參數
            ...mapGetters([
                'doneTodos',
                'doneTodosCount',
                'bankName'
            ])
        },
        methods: {
            doneTodosCounts() {
                return this.$store.getters.doneTodosCount;
            },
            addNumber() {
                this.$store.dispatch('actionIncrease')
            },
            lessNumber() {
                this.$store.dispatch('actionSubtract')
            },
            newBankName() {
                this.$store.commit('newBankName', '匯豐銀行');
            }
        }
    }
</script>

<style scoped lang="less">
    .main {
        text-align: center;

        .el-input {
            width: 100px;
        }
    }
</style>

④vuex中的commit和dispatch
commit:同步操作，寫法：this.$store.commit('mutations方法名',值)，數據提交至mutations，可用於登陸成功後讀取用戶信息，寫到緩存裏
dispatch:異步操作（向後臺提交數據），寫法： this.$store.dispatch('mutations方法名',值),數據提交至actions，可用於向後臺提交數據

⑤$store和store的區別

$store是掛載在Vue的實例上的（即Vue.prototype），而組件也是一個Vue實例，在組件中可使用this訪問原型上的屬性，template擁有組件實例的上下文，
可直接通過{{$store.state.userName}}訪問（等價於this.$store.state.userName）,

store 使用{{store.state.userName}},需要先聲明store才能使用