Vuex
2018-05-13 本文已影响0人
奶瓶SAMA
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
1.直接引入本地下载vuex.js文件
//快捷下载的方式--------------npm install vuex --save-dev
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
2.cdn加速
https://unpkg.com/vuex
3.在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：
//commonjs规范
var Vue = require('vue')
var Vuex = require('vuex')
//es6的使用方式
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
state --- 单一状态树
可以简单的理解成数据模型这个数据模型在整个应用中是唯一的
它是用一个对象包含了应用的所有的状态 (数据),至此,作为唯一数据源儿存在
每一个应用将仅仅包含一个vuex.store的实例,
mutations --- 状态更改
通俗来说,也就是进行数据的修改
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于methods和事件
使用vuex进行数据的操作
在vue组件中获取vuex的状态,每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
</body>
</html>
<script>
const store = new Vuex.Store({
//状态----数据模型
state: {
count: 0
},
//改变----数据操作----箭头函数
mutations: {
//increment: state => state.count++,
increment: function(state) {
state.count++
},
//decrement: state => state.count--
decrement: function(state) {
state.count--
}
}
})
const app = new Vue({
el: '#app',
computed: {
//在vue中获取vuex的状态----状态存储是响应式的(数据的双向绑定)
//从store实例中读取数据最简单的方式就是在计算属性中获取某个值
count() {
return store.state.count
}
},
methods: {
increment() {
store.commit('increment')
},
decrement() {
store.commit('decrement')
}
}
})
</script>
mapState
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
</body>
</html>
<script>
const store = new Vuex.Store({
//状态----数据模型
state: {
count: 0,
test:100,
},
//改变----数据操作----箭头函数
mutations: {
//increment: state => state.count++,
increment: function(state) {
state.count++
},
//decrement: state => state.count--
decrement: function(state) {
state.count--
}
}
})
const app = new Vue({
el: '#app',
store,
computed: Vuex.mapState({
//当需要使用多个数据的的时候,使用计算属性就显得不方便,vuex提供了一种新的方式
//为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
count:function() {
return store.state.count + store.state.test
}
}),
methods: {
increment() {
store.commit('increment')
},
decrement() {
store.commit('decrement')
}
}
})
</script>
