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才能使用