标签：数据 管理 直接 之间 回调函数 state script const font
Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。
这几句话挺高大上的，我理解的就是组件之间的关系太乱，为了方便做些多组件需要做共同的一件事而做的大管家
但是为了管理的话我们可以直接用Vue.prototype为全局添加实列？
弄了几组对照后发现是因为没办法响应式更新
然后记录一下咋操作的
安装就 npm install vuex 啥的
1.首先在src文件下创建一个目录取名看几个案例都取的sort,我也取的sort,然后在目录下创一个.js文件
2.和导入路由相似的导入方式
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex);//安装插件 使用.use()它会自动去回调install方法 const store=new Vuex.Store({//声明对象 state:{}, mutations:{}, actions:{}, getters{}, modules{}, });//五种属性 五大部件 export default store//导出store;别忘了去min里导入
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ import store from "./store/vuex"; Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, store,//导入 render: h => h(App) });
这里我们注意到了store是全局导入了哈，那我们不就可以用this.$store.属性.xx获得属性里的数据了嘛
进入正题
1.state属性
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex); const store=new Vuex.Store({ state:{ counter:100, isactive:true//设置全局访问的对象 }, }）
这是你要设置的全局访问的 state 对象，也就是你需要 啥就丢个啥
这里我丢了个两个不同的数据类型 作为一个对比。
那么如何在页面里得到state里的数据勒？
{{this.$sort.state.ccounter}}
2.getters和计算属性computed类似
getters:{ doubleCounter(state){ return state.counter*2; }
取得数据与state类似
{{this.$sort.getters.doubleCounter}}
getters里除了state参数外还能传入getter
getters:{ doubleCounter(state){ return state.counter*2; }, reduceCounter(state,getter){ return getter.doubleCounter-2; } }
取得数据方法一样
3.mutations里面必须定义同步函数
mutations:{ increment(state){ return state.counter++; }, decrement(state){ return state.counter-- } }
在页面上我们得需要函数去提交increment和的decrement 按照我的理解即是mutations里的函数可以看做两个部分头部+回调函数
<template>
<div id="app">
<h1>{{this.$store.state.counter}}</h1>
<button @click="additon">+</button>
<button @click="subtion">-</button>
</div>
</template>
<script>
export default {
name: ‘App‘,
methods:{
additon(){
this.$store.commit("increment")
},
subtion(){
this.$store.commit("decrement")
}
}
}
this.$store.commit("increment")里commit的回调increment里的函数 .
mutations还可以接受单个或多个参数
在组件里面： 第一种方式： this.$store.commit("increment",{name:‘stark‘,age:18,n:5}) 第二种方式： this.$store.commit({ type:"increment", n:5, age:18, name:‘stark.wang‘ })
mutations: { increment(state, playload) { //playload来接收后面 return state+playload.age; },
4.actions处理异步操作和mutations差不多但我在mutations里写异步函数比如setTimeout是可以响应在页面上的，但为什么不用？因为vue-Devtools是接收不到在mutations里
更变的值的注意一点所有更新值的操作都要经过mutations
actions:{ aincrement(context){
setTimeout(（）=>context.comit(‘increment‘)
,1000) }//这里的context可以理解为store
//app.vue里面用dispatch来提交给actions methods：{ add.$store.dispatch(‘aincrement‘) }
5.最后一个modules
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB})
getters:{
doubleCounter(state){
return state.counter*2;
},
reduceCounter(state,getter){
return getter.doubleCounter-2;
}
}
标签：数据 管理 直接 之间 回调函数 state script const font
原文地址：https://www.cnblogs.com/jiangxiaoming/p/13619006.html
