vue-09-关于Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

【即数据管理】

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

【vuex中存储着所有组件的共享数据】

 

状态管理模式

状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；【data】
• view，以声明方式将 state 映射到视图；【template】
• actions，响应在 view 上的用户输入导致的状态变化。【methods】

new Vue({ // state data () { return { count: 0 } }, // view template: `

{ { count }}

`, // actions methods: { increment () { this.count++ } } })

 

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

 

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

 

 

安装 Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })

 

 

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：store.commit （"increment "）

store.commit('increment') console.log(store.state.count) // -> 1

 

再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。

 

 

 

 

 

组件的关系

1,父传子 props

2,子传父 props 、@myevent（this.$emit( )） 、refs

3，非父子关系

App.vue 路由的slot

 

 

function A(){

return functionB(){

}

}

 

function A(){}

function B(){}

 

1,prototype Vue.prototype 事件总线

 

2、router push query ?id=xx

 

3、localstorage

 

html5 4g rust websembly

 

virtual dom + diff

 

 

vuex = redux ->flux

 

vue = angular1x + react

 

vue

angular tank

react AK47

 

VUEX 解决平行组件之间的数据共享问题,单例,观察者

 

redis maemcached

 

5步法

1,安装vuex npm install vuex -S,

把vuex作为 plugin安装到vue的原型 上。

2,使用vuex创建一个单例的store对象

使用store对象来管理组件中需要共享的状态

3,制订store中的管理规则

4,把创建好的store注册到Vue实例上

 

 

 

 

localstorage 方法：

单个xx.vue页面（需要两个不同的）：

 

 

 

 

vuex 方法：

【... —— 扩展运算符】

 

 

1、npm install vuex -S

 

2、main.js

import Vuex from "vuex" Vue.use(Vuex)

 

3、新建store文件夹，下index.js

import Vue from "vue" import Vuex from "Vuex" Vue.use(Vuex) //创建一个公共的store,用store来管理组件间需要共享的状态 //export default new Vuex.Store({}) let store = new Vuex.Store({ state:{ //store中需要共享的组件的状态 num:0, rice:"reice", eggs:"eggs" }, //store中的状态修改，需要通过store来完成, mutations:{ //用来更新的状态的地方 add:(state,data)=>{ return state.num++ //add 动作类型 {type:"add"} } }, actions:{ //接收组件的发送过来的请求，提交给mutations处理 inc:(store,payload)=>{ //component发送的一个动作类型 store.commit("add") //把动作类型{type:"add"} 提交到mutations } }, getters:{ //用来获取更新后的状态 getNum:(state)=>{ //通过getNum动作，获取最新的状态 num return state.num + 1000 } } }) export default store

 

4、main.js

import Vuex from "vuex" //安装了一个plugin //Vue extends Vuex Vue.use(Vuex) //Vue.install // 引用store import store from "./store" Vue.config.productionTip = false new Vue({ store, //vue.prototype.$store（相当于添加vue.prototype.$store） render: h => h(App) }).$mount('#app')

 

5、单个xx.vue页面（需要两个不同的）：

 

 

 

 

 

1、vuex使用场景

兄弟组件之间进行数据共享

 

2、vuex核心概念

store：vuex的对象

state：仓库管理的对象（shared states）

mutations：根据动作类型更改state，返回新的状态

actions：side effect（副作用），在mutation执行之前

getters：获取更新后的状态树

 

modules：分类对状态进行管理

plugins：插件（监听state的变化）