vuex状态管理

vuex

    主要应用于vue.js中管理数据状态的一个库

    通过创建一个集中的数据存储，供程序中所有组件访问

• vuex官方文档

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:
  

    
product-list-one:
    

    //2.使用数据
      
{{product.name}}--{{product.price}}
    
  
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:
  

    
product-list-one:
    

    //2.使用数据
      
{{product.name}}--{{product.price}}
    
  
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

在组件中映射属性为计算属性

三、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()方法

或者也可以直接在html中使用

② 在组件中映射属性为计算属性

在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()方法

四、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中的数据

*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--
      })
    }
  }
})

在组件中使用：

②从 vuex 中按需导入 mapActions 函数

使用方法和state、getters、mutations相同

六、module

    由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

    为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

待续......