什么是vuex：
专门为vue.js应用程序开发的‘状态管理模式’，
采用集中式存储管理应用的所有组件的状态，
以相应的规则保证状态以一种可预测的方式发生变化
状态：
组件内部状态：仅在一个组件内使用的状态（data字段）
应用级别状态：多个组件共用的状态
什么情况下使用vuex:
多个试图依赖于同一状态
来自不同试图的行为需要变更同意状态
子组件改变父组件的值：
父：<select-input :is-show.sync=listShow></select-input>
<!--is-show为自定义的名字，sync为vue约定名-->
export default {
data(){
return { listShow:false}
}
}
子：
export default {
props:['isShow'],
computed:{
isintShow(){
return this.isShow
}
},
methods:{
showListHand(){
this.$emit("update:isShow", !isintShow)
}
}
}
父：<select-input :data='list' @changTitle='titleHead'></select-input>
meghods:{
titleHead(title){
获取子组件传过来的title
}
}
子：
<li @click='getTitle(title)'></li>
export default {
props:['data'],
methods:{
getTitle(title){
this.$emit('changTitle',title)
}
}
}
使用vueX：
安装：npm install vuex --save
作为插件引入： Vue.use(Vue);
定义容器：new Vuex.Store()
注入根实例： {
store
}
注册流程：
在src目录下新建store文件夹，之后在store文件夹下新建index.js
--------------------
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//定义容器
let store=new Vuex.Store({
state:{ //放置应用状态数据,一个页面只有一个state,想要改变state里面的值，必须在mutations中
count: 100
},
mutations:{ //vuex中唯一能改变状态是地方
/*可以传值:addIncrement(state,n)
也可以传对象:addIncrement(state,mun)
第三种方式： removeIncrement(state,mun){
state.count-=mun.n
}*/
addIncrement(state,n){ //第二个参数是调用函数传递过来的参数
state.count+=n
},
removeIncrement(state,n){ //第二个参数是调用函数传递过来的参数
state.count-=1
}
}
})
export default store
------------------
main.js中引入：
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
------------------------
hello.vue中使用：
export default {
computed:{
num(){
return this.$store.state.count //调用vuex中的数据
}
},
methods:{
addHead(){
//改变状态，提交mutations
/*可以接受传值:this.$store.commit('addIncrement',n)
也可以接受传对象:addIncrement(state,obj) n=obj.n
removeHead(){
//this.$store.commit('removeIncrement',5)
//this.$store.commit('removeIncrement',{n:5})
this.$store.commit({
type: 'removeIncrement',
n:5
})
}
*/
this.$store.commit('addIncrement',5)
调用vuex中的方法(第二个参数是调用函数传递过来的参数)
},
removeHead(){
this.$store.commit('removeIncrement',5)//第二个参数是调用函数传递过来的参数
}
}
}
异步提交数据：
index.js:
let store=new Vuex.Store({
state:{ //放置应用状态数据,一个页面只有一个state
count: 100
},
mutations:{ //vuex中唯一能改变状态是地方
addIncrement(state,obj){
state.count+=obj.n
}
}
actions:{ //异步操作
addAction(context){ //context vue约定参数
//context 是一个对象，不是当前实例
setTimeout(()=>{
//要改变状态，必须提交mutations
context.commit('addIncrement',{n:5})
context.dispatch('textAction',{text:'我被触发了!'})//addAction执行完以后，在执行textAction,可以传参数
},1000)
},
textAction(context,obj){ //注意参数
console.log('我被触发了');
}
}
})
hello.vue:
methods:{
addHead(){
//改变状态，提交mutations
// 同步：this.$store.commit('addIncrement',{n:5})
//异步：
this.$store.dispatch('addAction')
}
一值两状态：
index.js
let store=new Vuex.Store({
state:{ //放置应用状态数据,一个页面只有一个state
count: 100
},
getters:{
filterCount(state){
return state.count >=120 ? 120 : state.count
}
},
mutations:{ //vuex中唯一能改变状态是地方
addIncrement(state,obj){
state.count+=obj.n
},
/* removeIncrement(state,n){
state.count-=n
},*/
removeIncrement(state,mun){
state.count-=mun.n
}
}
}
hello.vue:
export default {
computed:{
num(){
return this.$store.state.count
},
num2(){
return this.$store.getters.filterCount
}
}
}
holle.vue取值的第二种方式：
import {mapState,mapGetters} from 'vuex'
export default {
computed:mapState({
num: state =>state.count,
num2 : 'count',
num3 : function (state){
return state.count+100
}
或者：
computed:{
abc(){
//普通计算属性
},
...mapGetters({num2:'filterCount'}),
...mapState(['count'])
},
})
}
简化函数调用：
import {mapState,mapGetters,mapActions} from 'vuex'
methods:{
...mapActions({
addHead: 'addAction'
}),
addHeads(){
//改变状态，提交mutations
// 同步：this.$store.commit('addIncrement',{n:5})
//异步：
this.$store.dispatch('addAction')
}
}
函数传值：
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
...mapMutations({
removeHeads: 'removeIncrement'
}),
以上方式，传值需要在函数调用的时候去传值，无需在这里传值
<input type="button" name="" value="-" @click='removeHead(3)'>
-----------------------------------------------
removeHead(a){
//this.$store.commit('removeIncrement',5)
this.$store.commit({
type: 'removeIncrement',
n:a
})
}
网友评论