vuex 是一个专门为vue.js应用程序开发的状态管理模式。
这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。
也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。
vuex中,有默认的五种基本的对象:
state:存储状态(变量)
actions:异步操作。在组件中使用是this.$store.dispath(’’)
mutations:修改状态,并且是同步的。在组件中使用this.$store.commit(’’,params)。这个和我们组件中的自定义事件类似。
getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
modules:store的子模块,为了开发大型项目,方便状态管理而使用的。一般在总的管理中使用
1、首先创建一个vue-cli项目
执行下面的命令,创建一个project项目(这里也可以使用其他非webpack模板)
vue init webpack app 这是cli2版本的 ,也可以使用vue create project创建的什cli3版本
项目创建后,然后安装vuex,使用命令:npm install vuex --save(安装vuex保存到本地)
然后我们在项目的src目录下新建一个目录store,在store里面创建一个index.js,它相当于总务,管理着所有的数据,modules这个对象会应用在这里,来引入其他的子数据。
下面是我写的一个demo
基础使用:
一创建store,
二创建数据包
三导出数据包
四store内引入数据包,管理各个数据包
五在入口文件全局注入数据包
import Vue from 'vue'
import Vuex from 'vuex'
vue.use( Vuex )
const store = new Vuex.Store({//在这里要注意Store的大写问题
state :{
count:1
}
})
export default store //导出store
在上面 我们创建了一个vuex实例,,我们在index.js这个文件中引入了vue 和vuex ,创建了Vuex.Store实例保存到变量store中,最后使用export default导出store
然后我们就可以开始编写我们xuex业务代码了,那么我们的数据如何保存呢?
State:Vuex的数据源 ,我们需要保存的数据就保存在这里,可以在页面通过this.$store.state来获取我们定义的数据。
Vuex通常在大型项目中使用,所以我们在index.js中是对数据的总的管理,数据的定义会分别存放在storex下面的不同的文件夹内。
在index.js中,应用modules这个对象进行总的引入
/*
这里打造的就是vuex的仓库: store
*/
import Vue from 'vue'
import Vuex from 'vuex'
import count from './count'
这里的count指的就是我们打造的一个小的计数demo,存放在store下面的count文件夹下的index.js文件
Vue.use( Vuex )
// const store = new Vuex.Store( options )
const store = new Vuex.Store({
modules: {
count //
}
})
export default store
在count文件下的index.js中
// import {INCREMENT} from './type'
import * as type from './type'
//type是我在count文件夹下创建的一个用来定义常量的文件,常量的定义我们通常会大写,用来明显的区分常量和变量的区别。
const count = {
state: {
num: 0,
}, //state就相当于data
actions: {
// increment({
// commit
// }) { //这里的b也就是在传递过来的参数
// console.log('a',commit);
// console.log('b',b)//b指的是从组件传来的参数,我们给b起了个名字叫‘负载’,在这里payload,就是b,
//console.log('increment' )//actions的作用是创建动作,发出动作。
// const action = {
// type: type.INCREMENT, //动作的类型,比如类型 increment, decrement 类型我们一般用大写表示,用常量表示 ,我们通常在当前文件夹下面创建一个type.js存放这个常量。
// }
// commit(action)
// }
}, //actions 为用户的一个动作也是一个对象,在这里放的是时间处理程序,即方法
mutations: { //mutations的作用就是修改数据
//mutations 里面的方法的名称就是actions里面传递过来的方法名称,也就是type类型里面传递多来的参数。
[type.INCREMENT](state, action) { //在这里。函数名称可以自定义,为了语义化,我们将函数名与actions里面的函数名保持一致
// console.log('state',state);//在这里第一个参数,state是我们的数据
// console.log('action', action); //第二个参数 actions,指的是负载payload :b
<div>
<button @click = 'add'>+</button>
<p>前不标准后非标准 数据:{{this.$store.state.count.num}}</p>
</div>
</template>
<script>
export default {
mounted(){
//console.log(this.$store.state.count.num);
},
methods:{
add () {
this.$store.commit('increment',100)//跳过actions,直接将INCREMENT传递过去,即mutations里面的方法名字
// this.$store.dispatch( 'increment' );
// console.log(this.$store)
//this.$store.dispatch( 'increment',100 ),在这里我们可以这样子传递一个100的参数过去。
}
}
}
</script>
state.num++;
}
}, //用来修改数据的
getters: {
// newState(state) { //通过这一步的传输,我们可以在this.$store里面看到getters里面有newstate,在没有写这一步之前是没有newstate这个选项的
// return state.num //在这里我们虽然newState写的是一个方法,但是当我们在getters里面直接表示的是一个数值
// }
},
}
//这个count最终需要由count 管理,我们需要导出
export default count;
然后我们只需要在main.js这个入口文件中引入
复制代码
import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js' //全局使用数据,所以我们需要像vue-router一样全局注入,
Vue.config.productionTip = false
//然后注册,这样数据能全局获取
new Vue({
store,//像vue-route一样注册
render: h => h(App)
}).$mount('#app')
//这里是入口文件
接下来我们在components下面创建一个Count.vue文件,components下面一般用来存放公用组件。
<template>
<div>
<button @click = 'add'>+</button>
<p>前不标准后非标准 数据:{{this.$store.state.count.num}}</p>
<p>前标准后标准: {{}}</p>
</div>
</template>
<script>
export default {
mounted(){
//console.log(this.$store.state.count.num);
},
methods:{
add () {
this.$store.commit('increment',100)//跳过actions,直接将INCREMENT传递过去,即mutations里面的方法名字
// this.$store.dispatch( 'increment' );
// console.log(this.$store)
//this.$store.dispatch( 'increment',100 ),在这里我们可以这样子传递一个100的参数过去。
}
}
}
</script>
当我们在app.vue里面使用count这个count组件时。
<template>
<div id="app">
<Count></Count>
</div>
</template>
<script>
import Count from './components/Count'
export default {
name: 'app',
components: {
Count,
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vuex一共有四种模式,
前标准后标准 :
前标准后不标准:
前不标准后标准:
前不标准后不标准:
前标准与不标准的区别在于:是否通过actions这个对象来进行定义动作并传递动作。。
后标准于非标准的区别在于是否通过getters进行数据的修改。
上面的代码,我把集中形式都糅合在一起。
我的分享结束啦,如果对您有了一定的帮助,就给我一个赞?吧 ?