vuex
主要应用于vue.js中管理数据状态的一个库
通过创建一个集中的数据存储，供程序中所有组件访问
vuex核心概念：state、getters、mutations、actions、module
一、vuex 安装引入
1、安装vuex
npm install vuex --save
2、vue项目中导入vuex
在src目录下新建store/store.js文件，在该js文件中引入vuex
//1.引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
//2.使用vuex
Vue.use(Vuex)
//3.创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
//state存放公共基础数据
state:{
},
//对数据的处理
getters:{
}
//4.向外暴露store数据仓库，这样其他vue组件才能使用store内的数据
export default store
3、将store对象挂载到vue实例中
在src/main.js下
//1.引入store
import store from './store/store'
new Vue({
//2.挂载store对象
store:store,
})
4、在vue组件中使用store.js内的数据
使用computed计算属性，通过调用this.$store.state.属性名，获取到需要的数据。
html:
<div>
<h2>product-list-one:</h2>
<ul>
//2.使用数据
<li v-for="product in products">{{product.name}}--{{product.price}}</li>
</ul>
</div>
js:
computed:{
//1.获取store.js中的数据
products(){
return this.$store.state.products
},
}
二、state:{}
state 提供唯一的公告数据源，所有共享的数据都要统一放到 store 的 state 中进行存储。我们需要保存的数据就保存在这里，可以在组件页面通过 this.$store.state.属性名来获取我们定义的数据。
组件访问store中数据的两种方式:
1、this.$store.state.属性名
store.js中定义数据
//1.引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
//2.使用vuex
Vue.use(Vuex)
//3.创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
//state存放公共基础数据
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
]
},
//对数据的处理
getters:{
}
//4.向外暴露store数据仓库，这样其他vue组件才能使用store内的数据
export default store
vue组件中使用store.js数据
html:
<div>
<h2>product-list-one:</h2>
<ul>
//2.使用数据
<li v-for="product in products">{{product.name}}--{{product.price}}</li>
</ul>
</div>
js:
computed:{
//1.获取store.js中的数据
products(){
return this.$store.state.products
},
}
2、将store.js数据，映射为当前组件的计算属性
在store.js中定义属性msg
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
msg:'映射为计算属性'
},
})
export default store
在组件中映射属性为计算属性
<template>
<div>
//3.使用store中定义的msg属性
<span>{{msg}}</span>
</div>
</template>
<script>
// 1.从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'
export default {
name: "ProductListOne",
computed:{
// 2.将全局数据，映射为当前组件的计算属性
...mapState(['msg'])// 用...展开运算符把 msg展开在资源属性里
}
}
</script>
三、getters:{}
Getter 用于对 Store 中的数据进行加工处理形成新的数据。不会修改 state 里的源数据，只起到一个包装器的作用，将 state 里的数据变一种形式然后返回出来。
① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
② Store 中数据发生变化，Getter 包装出来的数据也会跟着变化。
1、定义getters：
const store = new Vuex.Store({
getters: {
}
})
2、getters的两种使用方式(和state的两种使用方式相同)：
① this.$store.getters.方法名
在store.js中定义方法
const store = new Vuex.Store({
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
]
},
getters:{
handleProducts: (state)=>{
var handleProducts = state.products.map(
(products)=>{
return{
name:'@'+products.name+'',
price:products.price/2
}
}
)
return handleProducts
}
}
})
在组件计算属性获取到使用handleProducts()方法
<template>
<div>
<h2>product-list-two:</h2>
<ul>
//2.通过计算属性使用数据
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "ProductListTwo",
computed:{
products(){
return this.$store.state.products
},
handleProducts(){
//1.获取store.js中定义的数据处理方法
return this.$store.getters.handleProducts
}
}
}
</script>
或者也可以直接在html中使用
<template>
<div>
<h2>product-list-two:</h2>
<ul>
//在{{}}中直接通过this.$store.getters.handleProducts获取到数据
<li v-for="product in this.$store.getters.handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
</div>
</template>
② 在组件中映射属性为计算属性
在store.js中定义方法handleProducts（）
const store = new Vuex.Store({
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
]
},
getters:{
handleProducts: (state)=>{
var handleProducts = state.products.map(
(products)=>{
return{
name:'@'+products.name+'',
price:products.price/2
}
}
)
return handleProducts
}
}
})
在组件中使用handleProducts()方法
<template>
<div>
<h2>product-list-one:</h2>
<ul>
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
</div>
</template>
<script>
// 1.从 vuex 中按需导入 mapState 函数
import {mapState, mapGetters} from 'vuex'
export default {
name: "ProductListOne",
// 2.将全局数据，映射为当前组件的计算属性
computed:{
...mapGetters(['handleProducts'])// 用...展开运算符把 handleProducts展开在资源属性里
}
}
</script>
四、Mutations
Mutations 用于变更 Store 中的数据。严格模式下（strict:true），只有 mutation 里的函数才有权利去修改 state 中的数据。mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。但是，mutation只允许同步函数，不能写异步的代码。
①严格模式下（strict:true），只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
②通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
1、定义mutations：{}
const store = new Vuex.Store({
mutations: {
}
}
})
2、mutations的两种触发方式：(与state、getters的两种触发方式一样)
① this.$store.commit('事件名')
在store.js中定义事件declinePrice
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
strict:true,//严格模式下，vuex里的数据组件只能通过commit触发store里的mutations
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
],
},
mutations:{
//1、定义事件declinePrice
declinePrice: (state)=>{
state.products.forEach((product)=>{
product.price--
})
}
}
})
export default store
在vue组件中调用commit改变store中的数据
<template>
<div>
<h2>product-list-two:</h2>
<ul>
<li v-for="product in products">{{product.name}}--{{product.price}}</li>
</ul>
<button @click="declinePrice">decline</button>
</div>
</template>
<script>
export default {
name: "ProductListTwo",
computed:{
products(){
return this.$store.state.products
},
},
methods:{
declinePrice: function (){
//通过commit调用函数，改变store的数据
this.$store.commit('declinePrice')
}
}
}
</script>
<style scoped>
</style>
*mutations传递参数
在组件中的代码：
// 触发 mutation
methods: {
handleAdd () {
this.$store.commit('addN', 3)
}
}
打开 store/index.js 文件，增加一个 addN：
mutations: {
//形参step接收组件传的参数3
addN (state, step) {
state.count += step
}
}
②从 vuex 中按需导入 mapMutations 函数
在store.js文件中定义declinePrice函数
const store = new Vuex.Store({
strict:true,//严格模式下，vuex里的数据组件只能通过commit触发store里的mutations
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
],
},
mutations:{
declinePrice: (state)=>{
state.products.forEach((product)=>{
product.price--
})
}
}
})
在组件中使用：
<template>
<div>
<h2>product-list-one:</h2>
<ul>
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
<button @click="declinePrice">decline</button>
</div>
</template>
<script>
//1.将指定的 mutations 函数，映射为当前组件的 methods 函数
import {mapGetters,mapMutations} from 'vuex'
export default {
name: "ProductListOne",
computed:{
products(){
return this.$store.state.products
},
},
methods:{
...mapMutations(['declinePrice'])用...展开运算符把declinePrice展开在methods里
}
}
五、Actions
Actions类似于mutations，不同在于：
- Actions提交的是mutations，而不是直接变更状态
- Actions可以包含任意异步操作
1、定义actions
// 定义 Action
const store = new Vuex.Store({
actions: {
}
}
})
2、Actions的两种触发方式：
① this.$store.dispatch('方法名')
例子：目的-设置一个定时器，三秒后number自减
在store.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
strict:true,//严格模式下，vuex里的数据组件只能通过commit触发store里的mutations
state:{
products:[
{name:'nico',price:380},
{name:'wukong',price:290},
{name:'jarvis',price:290},
{name:'janey',price:401},
],
msg:'映射为计算属性'
},
getters:{
handleProducts: (state)=>{
var handleProducts = state.products.map(
(products)=>{
return{
name:'@'+products.name+'',
price:products.price/2
}
}
)
return handleProducts
}
},
mutations:{
declinePrice: (state)=>{
state.products.forEach((product)=>{
product.price--
})
}
},
actions:{
//1.定义一个属性declinePrice，
//context相当与this.$store
declinePrice:(context)=>{
//2.定时器三秒后触发mutations里面的declinePrice属性
setTimeout(()=>{
context.commit('declinePrice')
},3000)
}
}
})
export default store
在vue组件中
<template>
<div>
<h2>product-list-one:</h2>
<ul>
<li v-for="product in handleProducts">{{product.name}}--{{product.price}}</li>
</ul>
<button @click="declinePrice">decline</button>
</div>
</template>
<script>
// 1.从 vuex 中按需导入 mapState 函数
import {mapGetters,mapMutations} from 'vuex'
export default {
name: "ProductListOne",
computed:{
products(){
return this.$store.state.products
},
// 2.将全局数据，映射为当前组件的计算属性
...mapGetters(['handleProducts'])
},
methods:{
//3.onclick事件，通过this.$store.dispatch('declinePrice')去触发store.js中的actions
declinePrice: function(){
this.$store.dispatch('declinePrice')
}
}
}
</script>
<style scoped>
</style>
②从 vuex 中按需导入 mapActions 函数
使用方法和state、getters、mutations相同
六、module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
