vue之vuex(数据层)入门了解

在一般的开发中vue一般承担视图层的开发内容。当我们遇到大量数据之间传递的时候，往往我们需要一个数据框架进行辅助

这个就是vuex了（官网文档学习）

设计理念：状态管理库（创建一个公共的响应式数据存储仓库）

一张图带你学习vuex

数据的获取

数据都存放在state中。组件可以直接调用state中的数据

数据的改变：（数据不能通过组件去直接改变，需要走一个流程（单项数据流））

分为两种情况：同步和异步

当数据同步的时候：我们可以直接跳过Action ，组件调用commit方法。触发vuex中Mutations的自定义函数（里面是同步的对state的修改）

当数据异步的时候：组件调用Dispatch方法。触发vuex中Actions的自定义函数（里面存放着异步数据，或者比较复杂批量的同步操作也可以放在里面），接着我们在Actions自定义函数中调用commit方法。去触发vuex中执行vuex中Mutations的自定义函数。

小结：数据最终的改变在Mutations中完成

 

vuex使用：

首先安装vuex   

 git中输入 npm install vuex --save 

在项目中main.js文件引入vuex （但是一般不这样做，单独在src下创建一个stroe文件夹创建index.js文件）

按照官网引入 引入vue 再引入vuex （因为vuex是一个插件）按照插件的引入格式，所以Vue.use（Vuex）

然后我们需要导出一个由 vuex 创建的仓库（需要new）

仓库里面存放着数据，和改变数据的类

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{ //vuex的数据存储点
        city:'上海'
    }, 
    actions:{ 
        changeCity(ctx,city){ //自定义函数，第一个参数是vuex上下文，第二个为接收的数据city
            ctx.commit('changeCity',city) 
//通过vuex上下文包含commit方法。调用commit，参数为自定义一个函数和接收city。自定义函数在mutations中执行
        }
    },
    mutations:{
        changeCity(state,city){
            state.city = city 
        }
    }
})

当然，通过以上我们是构建了一个数据仓库，但是我们还没有在main.js 文件中引入（直接引入文件夹，自己查找）

import store from './store'

创建跟vue实例的时候需要以下引入就行路由一样

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import store from './store'
import './assets/styles/reset.css'
import './assets/styles/border.css'
import './assets/styles/iconfont.css'
import 'swiper/dist/css/swiper.css'



Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.use(VueAwesomeSwiper, /* { default global options } */)

/* eslint-disable no-new */
new Vue({ //根实例
  el: '#app',
  router,
  store, //被派发到每个子组件
  components: { App },
  template: '<App/>'
})

组件如何访问vuex中的数据（因为在跟实例中。我们可以直接访问）：

this.$store.state.city

vuex的高级写法

通常对于一个仓库。我们还可以分几个模块。使得代码更加清晰。

拆分成多个单页面在index中引入。然后分别 export default 导出

对于数据的查看和修改，还有更方便的写法

在对应的文件中引入mapState和mapMutations  可以使得写法更加简洁

主要运用了es6语法中的。。。扩展运算符。将store 中的state映射到了当前文件。这样就简化了操作

<script>
import {mapState,mapMutations} from 'vuex'//vuex简便方法
import Bscroll from "better-scroll";
export default {
  name: "HotCity",
  },
  methods:{
    handleCity(city){
      this.changeCity(city) //简写
      this.$router.push('/') //路由自带属性，回到某个页面
      
    },
    ...mapMutations(['changeCity'])
  },
  computed:{
    ...mapState(['city']) 
    // ...mapState({
    //   hotCity:city //标签中对应的是this.hotCity
    // }) 
    //运用展开运算符，把store中的city映射到当前文件。括号里可以是数组和对象
  }
};
</script>