【vuex】 自己乱七八糟看教程...

本文主要是介绍【vuex】 自己乱七八糟看教程...，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

教程来源  https://www.jianshu.com/p/120eaf50331c 整理是为了自己看着方便 qaq

先声明  大部分不是自己写的 _(:з」∠)_ 一个网站教程 和视频 只为了记录

第一节 入门 

大概就是 

1 npm install vuex --save

2  需要显式引用 qaq

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3 Vuex 依赖 Promise。如果你支持的浏览器并没有实现 Promise (比如 IE)，那么你可以使用一个 polyfill 的库，例如 es6-promise.。也可以自己构建啊什么的。。

npm install es6-promise --save # npm
yarn add es6-promise # Yarn

4 Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的。

比如两个文件都想操控count  而且修改后 是双方都要第一个知道

那 把数据源 count 剥离开来，用一个全局变量或者全局单例的模式进行管理，这样不就在任何页面都可以很容易的取到这个状态了  大概就是这样了

Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的。

5  大项目vuex  小项目无所谓 中的用：

共享单车  指代的是官方中的一个简单的 store 模式，其实就是一个单纯的全局对象。

6 每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

【更改不能直接更改 你懂8  你要提交commit  才能改变这个全局的数据

store.commit('increment') // 调用 mutations 中的方法
console.log(store.state.count) // -> 1

这样来 意图更明显  qaq 总之你懂8

第二节  这里讲state  和getter。

1  Vuex 的内脏由五部分组成：State、Getter、Mutation、Action 和 Module  

state 和mutation 是必要的

2 Vuex 使用的是「单一状态树」

等下自己复述一下 qvq

单一，不会乱套，可以直接撸到树的某个位置，以及取得状态快照。。。巴拉巴拉

3 怎么获取展示状态？（应用

 【注意不能在data里 和模板里 它们不能访问 /  直接刷新

所以我们用 计算属性。

 computed: {count () {return  store.state.count    }}

每当 store.state.count 变化的时候, 都会重新求取计算属性，并刷新界面。

4  也可以直接注入每个子组件：哦!         QAQ  app.vue吧 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中

  return this.$store.state.count

这样就可以直接访问到 不要自己引入了（全局的，不仅全局 而且帮你做好了qvq

5 getter： 提供数据处理来满足我们的需求qvq

可以把它当成 store 中的计算属性（computed）。

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

 

getters: {

  // Getter 还也可以接收 getters 作为第二个参数

  dateLength: (state, getters) => {

    return getters.weekDate.length;

  }

}

还会将 store. getter 对象暴露出去  可以访问 这个时候这样用

computed: {weekDate () {return this.$store.getters.weekDate}
}

是不是很方便qvq  避免了写一堆无用的

6  然后 如果想找不一样的格式，就把getter写成函数一样的

getters: {// 返回一个函数，就可以传参了weekDate: (state) => (fm) => {    return moment(state.date).format(fm ?fm :'dddd');}}

用的时候   我感觉是 如果fm有的话 就用fm  没的话 就是dddd呗 /? qvq  总之这个moment 是个外部库

store.getters.weekDate('MM Do YY')

第三讲 Vuex旗下的Mutation

1 只有mutation 可以动 state 

每个mutation 都有一个 字符串的事件类型 type 和 一个回调函数 handler

2 只能使用store.commit ('increase' ) 只能使用store.commit来提交这个mutation方法 qvq

mutations: {increment (state, n) {state.count += n}
}// 调用
store.commit('increment', 10)

// 2、整个对象都作为载荷传给 mutation 函数 store.commit({ type: 'increment', amount: 10 })

大概state是它的默认参数吧qvq  所以这么写了....

后面这个东西叫 payload "载荷"

3 对于对象 的 修改规则，稍微麻烦一点qvq  

如果是动态的修改 需要遵循vue的规则  像什么   Vue.set(state.student, 'age', 18)  （不过我估计也不会这么改qwq 这个是新增的

修改还是 state。students. age=19  

4 使用常量  qvq

就是使用常量来替代 mutation 事件的名字。为啥呢qvq....  因为只是方法名的话容易乱,  这里我不是很懂qvq

Mutation 必须是同步函数。为什么呢？

前面说了，我们之所以要通过提交 mutation 的方式来改变状态数据，是因为我们想要更明确地追踪到状态的变化。如果像下面这样异步的话： api.callAsyncMethod(() => 这样子就不太行的意思qvq

第四讲  Vuex旗下的Action

我看不懂啦啊........!!! 看不懂了

一个组件要获取多个状态的时候就用mapstate

  computed: mapState({// 箭头函数可使代码更简练a: state => state.a,b: state => state.b,c: state => state.c,

而且可以简化qvq  我不看了

==============

实战 我们也来随便看一下吧qvq(也就是 第六讲

1 先在app.vue里建立了一个  然后在src里  写了一个store.js

是js里哦，这边  vue。use（vuex）

然后 Vuex.store

state我们有  mutation也有  (里面有一个set那么 果然state是默认参数，其他的是可选可传入的

actions 大概是为了给异步提交 异步提交用的 qvq 它也是commit提交的。

2 在main.js 里面引入store  并且全局注册

3 app.vue 也要引入  mapxxxx...???... 

可以 this.$store.state.moduleA.text 这种方式来直接访问模块中的 state 数据。module

 

=====================这里跟着视频做了

vuex就是一个数据仓库 或者状态

explot   default 给暴露出去 qvq

$store . state .count

alt   +  shift  + 下方向键 复制本行

这个视频.....emmm  by技术胖 jspang 还行吧就;... 

还真是实际用的，那demo还是要写的 qvq

4.1视频

store.js  然后模板在count.vue里面

Vue.use(Vuex)

const state={

    count: 4

}

const mutations={

    add(state){

        state.count++;

    },

    reduce(state){

        state.count--

    },

}

export default new Vuex.Store({

    state,

    mutations,

})

也就是这样定义，然后export出去，外面的就都可以用到了。

add(state) 注意一下里面是写的state....传state  然后再巴拉巴拉 qaq

嗯qaq  外面调用数据就是$store.state.count

或者 $store.commit('add') 这个是mutations里面的值 qvq   

外面可以import 然后export里也写，啊不过我记得可以直接注入的qvq (是的 上面有的)

视频来源于 【技术胖】 的vue教程哦qvq https://jspang.com/posts/2017/05/03/vuex.html

qvq  那这还行8

啊。测试了一下 的确可以直接在根组件里面用 全部注入子组件不用再重新引用了qvq，，直接import，el：‘#app’，store 就可以了，只不过要记得把之前用过的痕迹清空……

4.2节课的内容 

<h3>{{$store.state.count}}-{{count}}</h3> 

主要是想把左边这一长串  想用右边的短短的来显示。有三种方法：

1 computed 计算属性  这样可以直接用{{count}}  效果相同qvq

不能直接在data 因为没法响应式  你懂8  

    computed:{

        count(){

            return this.$store.state.count;

        }

    }

也可以mapstate

    computed:mapState({

        count:state=>state.count  【后面不要加分号

    }),

这里要import {mapstate} from ’vuex‘；

还可以最简单

computed:mapState(['count']),

也可以es5的语法：

     computed:mapState({

        count:function(state){

            return state.count;

        }

    }),

访问状态对象qvqqqq。。。。。访问状态对象

4.3视频  讲了 mapMutation

还有参数的引用，在store.js里面写   

    add(state,n){

        state.count+=n;

    },

引用的时候$store.commit('add',10)

记一下哦qvqqq，前面是方法名，后面是传的值，虽然长得有点诡异对吧qvq

mapMutations  其实也mapstate一样，先import from vuex

也在methods一样用

 methods:mapMutations(['add','reduce'
]),

用的时候 

<button @click="reduce">-</button>

哦qvq 它是methods，，对面是computed（对应数据）

可以的，完全没有压力好吧，如果有参数的话直接

@click=’add（10）‘ 完全ok的qvq

第4节：getters计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

getters 就相当于  store里面的computed 计算属性

const getters = {

    count: function(state){

        return state.count+=10000;

    }

}

然后 这个写的是const  那么记得 给export 的default 里面里写一下写出去qvq、

这个。。。。  三个

点 是ES6 扩展运算符  它将一个数据，变为参数序列。

     computed:{

        ...mapState(['count']),

        ...mapGetters(['count']),

    },

可以直接这么写~   可以的呀  上面的是数据搞到了state 下面是getters   也就是默认我们进行的每次都加的操作呗qwq  这俩是不同 的 但是。。。的方式 es6直接简写了  还是很爽的qvq

第五节： actions 异步修改状态

actions和mutations差不多，但是它是异步改变状态的qvq。

同步异步去视频里看。。

 

actions是可以调用Mutations里的方法的~

我们写了：

    const actions ={

    addAction(context){  【这里面有个store  这个是上下文对象 相当于所有的都包括了吧qvqqq】

【对啊不是总是 $store 。 commit嘛qvq】 调用的方法是一样的。。。

        context.commit('add',19);

    },

    reduceAction({commit}){

        commit('reduce')

    },

}

而且 这里也可以直接传了一个包装好了的commit。

mutation是同步，一起去吃饭了，actions是异步，你先去吃我断后qvq。

1 store。js里写了export

2 写了个button 直接这样用 addAction 参数也没写（因为写在action里了）

3 <script >还是要准备 

4 computed 里面是mapstate 和mapgetters

那么 methods里就是两个函数一样的...   mapmutations  map actions

扩展三点符  给他扩展一下 其实差不多了qvq

[关键]-------------

怎么让他显示出来呢 我们异步一下呗qvq 就

    addAction(context){

        context.commit('add',1);

        setTimeout(()=>{

            context.commit('reduce')

        },500);

        console.log('我比那个人先执行了');

    },

qvq反正就是可以异步，我看出来了，时间剪短之后直接数值自己嗖嗖嗖变了qvq。。

可以可以。总之actions是支持异步的，可以用这个长相奇怪的settimeout ，大家都没啥意见。。

第六节。module

随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。

还是这样看视频最好懂啊。。。

axois  我官方推荐的异步请求qvq

这个模块租，有的时候 其实没那么复杂就没必要先用

const moduleA={

    state,mutations,getters,actions

}

export default new Vuex.Store({

   modules:{a:moduleA}

})

或者 modules：{a: moduleA , b: moduleB}

这样可能每个人写的不一样会好管理一点吧...

但是qvq, 它不是那么直观，也可能会有一些坑在。

总之qvq先这样吧~

实际项目里啊  登录状态什么的 都需要vuex 但是不要过度依赖它qvq  传参的话还是去传参 除非你好几个地方都要用到 才去用一下那个vue

 

最后整体打包一下：

store。js代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)const state={count: 4
}
const mutations={add(state,n){state.count+=n;},reduce(state){state.count--;},
}const getters = {count: function(state){return state.count+=10000;}
}
const actions ={addAction(context){context.commit('add',1);setTimeout(()=>{context.commit('reduce')},500);console.log('我比那个人先执行了');},reduceAction({commit}){commit('reduce')},
}const moduleA={state,mutations,getters,actions
}
export default new Vuex.Store({modules:{a:moduleA}
})

count。vue代码

<template>
<div><h2>{{msg}}</h2><hr><h3>{{$store.state.a.count}}-{{count}}</h3><p><button @click="add(10)">+</button><button @click="reduce">-</button></p><p><button @click="addAction">+</button><button @click="reduceAction">-</button></p>
</div></template>
<script>
import {mapState,mapMutations, mapGetters, mapActions} from 'vuex';
export default {data(){return{msg:'Hello Vuex',}},computed:{...mapState(['count']),...mapGetters(['count']),},methods:{...mapMutations(['add','reduce']),...mapActions(['addAction','reduceAction'])},
}
</script>

app。vue代码(这里面倒是没什么...  就是这样引入了一下 我这个是全局引入qvq) 

<script>

import store from '@/vuex/store.js'

export default {

  name: 'App',

    el: '#app',

    store,

}

</script>

还有路由

{

      path: '/count',

      name: 'Count',

      component: Count

    },

qvq.....  有什么是可以期待并且很美好的事情呢qvq

这篇关于【vuex】 自己乱七八糟看教程...的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---