Vuex 个人见解

vuex

概念

• 其实跟管家很相似,他把vue项目很清晰的分成了两个部分很是清晰

• 视图方面只负责渲染 并没有逻辑代码

<template>
    <div>
        <h1>我是页面01</h1>
        
        <h2>我想吃{{$store.state.info}}</h2>
    </div>
</template>
<script>
export default {    
}
</script>
<style lang="" scoped>  
</style>

• vuex仓库

import Vue from 'vue';
import Vuex from "vuex";

Vue.use(Vuex)
const Store = new Vuex.Store({
    state:{
        info:'巧克力'
    }
    
});

export default Store

Vuex仓库属性详解

• state =>类似于data属性进行渲染
• getters =>相当于计算机属性(可以作为数据data和视图之间的中转)
• mutations =>是修改state的唯一方式,操作同步的方法
• actions =>是发起行动类似与mutation 主要是调取Api接口

modules模块

• Vuex 中可以将store分割成模块避免臃肿
• 每一个模块都有自己的属性
  • state
  • mutation
  • action
  • getter
• 还可以嵌套子组件

注意: vuex没有存储功能刷新页面就会回到初始的状态可以配合数据库进行使用

Vuex的扩展属性

• 创建仓库

//index.js
//创建仓库
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//引入vuex的属性
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutation'
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})
export default store

• 辅助性函数

  • mapState

  //state.js
  const state = {
      msg:'vuex',
  }
  
  export default state

  • mapGetter(常用)

  //getter.js
  //引入state对象
  import state from './state'
  console.log(state,'statestatestate')
  const getters={//相当于计算属性
      getMsg(){
          return state.msg
      },
      getGoodsList(){
          return state.goodsList
      }
  }
  export default getters

  上面的两个扩展属性放到计算属性(computed)里面

  • mapMutations

  //mutation.js
  //mutation是唯一修改state的方法
  const mutations={
      getList(state,payload){
          //state 是状态
          //payload 是行动传递过来的参数
          state.goodsList = payload
      }
  }
  export default mutations

  • mapActions(常用)=>调取接口

  //action操作异步方法
  //调取接口API
  import API from '../util/axios'
  //action操作异步方法
  const actions={
      requestList(context){
          API.getList()
          .then(res=>{
              console.log(res,'得到的商品列表')
              if(res.data.code==200){
                  //发起一个mutation
                  context.commit('getList',res.data.data)
              }
          })
          .catch(err=>{
  
          })
      }
  }
  export default actions

  上面两个放方法(methods)里面

视图

<template>
    <div>
        <h1>商品列表页面</h1>
        <h1>{{getMsg}}</h1>
        <ul>
            <li v-for='item in getGoodsList' :key='item.id'>
                <h3>商品名称：{{item.name}}</h3>
                <h3>商品价格：{{item.price}}</h3>
            </li>
        </ul>
    </div>
</template>

总结:

​ vuex的出现让页面更加清晰,仓库集中的管理了vue项目中的逻辑代码实现了视图数据分离的状态 而模块实现了分模块管理vue项目 以及扩展属性让我们的代码更轻便更优雅