vuex 基础介绍

vuex 基础

安装

直接下载 / CDN 引用

https://unpkg.com/vuex

Unpkg.com 提供了基于 NPM 的 CDN 连接。以上的连接会一直指向 NPM 上发布的最新版本。您也能够经过 https://unpkg.com/vuex@2.0.0 这样的方式指定特定的版本。

在 Vue 以后引入 vuex 会进行自动安装：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

NPM

npm install vuex --save

Yarn

yarn add vuex

在一个模块化的打包系统中，您必须显式地经过 Vue.use() 来安装 Vuex：

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

Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时，不须要以上安装过程。

本身构建

若是须要使用 dev 分支下的最新版本，您能够直接从 GitHub 上克隆代码并本身构建。

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    
    它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
    
    Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态【数据】管理

因为多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也常常逐渐增加。

为了解决这个问题，Vue 提供 vuex：咱们有受到 Elm 启发的状态管理库。

vuex 甚至集成到 vue-devtools，无需配置便可访问时光旅行。

<div id="app"></div>
    <template id="tpl">
        <div>
            <tip :num="count"></tip>
            <input type="button" value="+" @click="count++"/>
            <input type="button" value="-" @click="count--"/>
        </div>
    </template>
<!--   状态 【数据】管理
    data                -->
    <script>
    new Vue({
        el:"#app",
        //state
        data () {
            return {
                count: 0      //状态
            }
        },
        //view
        template:"#tpl",
        components:{
            
            tip:{
                props:["num"],
                template:"<div>{{num}}</div>"
            }
        }
    });
    
    </script>

vuex有6个概念

Store 用来存储数据(状态)

安装 Vuex 以后，让咱们来建立一个 store。建立过程直截了当——仅须要提供一个初始 state 对象和一些 mutations：

var store = new Vuex.Store({
            state:{
                count:0
            },  
        mutations:{
            jia:function(state){
                state.count++;
            },
            jian(state){
                state.count--;  
            }
        }
    });    

    store.commit("jia");
    store.commit("jia");
    store.commit("jia");

    console.log(store.state.count);

能够经过 store.state 来获取状态对象，以及经过 store.commit 方法触发状态变动：

store.commit("jian");
    store.commit("jian");

        console.log(store.state.count);

咱们经过提交 mutation 的方式，而非直接改变 store.state.count，是由于咱们想要更明确地追踪到状态的变化。

// store   用来存储数据(状态)
    state:{
        count:1
    }
    // 经过 mutations 改变数据
    mutations:{
        jia(state){
        }
    }
    // 读数据
    store.state.count

State 数据

那么咱们如何在 Vue 组件中展现状态呢？因为 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

var store=new Vuex.Store({
        state:{
            count:0
        },
        mutations:{
            jia(state){
                state.count++;
            },
            jian(state){
                state.count--
            }
        }
    });
    new Vue({
        el:"#app",
        template:"#tpl",
        components:{
            tip:{
                template:"<div>{{$store.state.count}}</div>"
            },
            oper:{
                template:`<div><input type="button" value="+" @click="$store.commit('jia')"/>
                          <input type="button" value="-" @click="$store.commit('jian')"/></div>`
            }
        },
        store
    });

Getters 计算属性

有时候咱们须要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

Vuex 容许咱们在 store 中定义getters（能够认为是 store 的计算属性）。就像计算属性同样，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Mutations 改变数据

mutations 与事件相似，更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。因此 mutations 上存放的通常就是咱们要改变 state 的一些方法。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变动状态
      state.count++
    }
  }
})

能够在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（须要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    })
  }
}

Actions

在mutation 中混异步调用会致使你的程序很难调试。

　　　　Action 相似于 mutation,不一样在于。

　　　　Action 提交的是 mutation ,而不是直接变动状态。

　　　　Action 能够包含任意异步操做。

　　　　注册一个简单的 action

const store = new Vuex.Store({

　state: {

　    count：0

　}，

　mutations: {

　　　increment (state) {

　　　　    state.count++
　　　}
　},
　　actions: {

　　　　　increment (context){

　　　　　　　context.commit('increment')

　　　　　　　}
　　　　}
})