本文主要是介绍【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 # Yarn4 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】 自己乱七八糟看教程...的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
