Vuex的使用
(。^。) 来扯一扯Vuex呗~
Vuex：是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
一．什么情况下使用vuex?
- 多个视图依赖于同一状态
- 来自不同视图的行为需要变更同一状态
二．Vuex核心概念
1.store（仓库）：就是一个容器，它包含着应用中大部分的状态；状态存储是响应式的；不能直接改变store中的状态
2.state（状态）：定义应用的单一状态树，用一个对象就包含了全部的应用层级状态
3.getter（派分的状态）：抽离操作状态的逻辑，可被多组件使用
4.mutation（修改状态的唯一途径）：要使改变状态可被记录，必须要commit一个mutation；mutation必须是同步更新状态
4.action（异步操作）：异步操作产生结果；action提交的是mutation，而不是直接变更状态
三．例子
1.想要改变state，必须提交mutation
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const state = {count:100}const mutations = {updateCount (state) {state.count += 1}}const store = new Vuex.Store({state,mutations})export default store;
调用handleUpdate方法进行改变
handleUpdate(){this.$store.commit('updateCount')}
2.获取state中的值
（1）存在data中。存在data中的数据，当调用handleUpdate方法时，值不会改变，因此一般不使用此方法获取
data () {return{n:this.$store.state.count}},
（2）直接获取
<h2>直接获取：{{$store.state.count}}</h2>
（3）通计算属性获取
computed:{m(){return this.$store.state.count}},
3.传值
推荐对象的写法，有利于扩展
handleUpdate(){this.$store.commit('updateCount',{add:2})}const mutations = {updateCount (state,payload) {state.count += payload.add}}
4.getters实时监听state的变化
就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有它的依赖值发生改变才会被重新计算
getters : {totals (state) {return state.shopList.reduce((n,item)=>n+item.count,0)}},<h2>统计总数：{{$store.getters.totals}}</h2>
5．action异步操作
add(id){this.$store.dispatch('updateCountAction',{id})}const actions = {updateCountAction(context,params){//异步操作放这里setTimeout(() => {context.commit('updateCountById',params)},3000)}}
还是通过mutaion，而不是直接变更状态
const mutations = {updateCountById(state,payload){state.count += payload.id}}
柔光的暖阳◎
我就是我
╰+攻爆jí腚メ
骑猪看日落
还没有评论，来说两句吧...