这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战
什么是vuex？
Vuex 是专门为 Vue.js 设计的状态管理库，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单地说就是采用全局单例模式，将组件的共享状态抽离出来管理，使组件树中的每一个位置都可以获取共享的状态（变量）或者触发行为。
额，或者更直白的说就是响应式的全局变量
Vuex的安装以及使用
安装Vuex
npm install vuex --save // 如果安装了淘宝镜像可以使用 cnpm安装
新建store文件夹,新建一个index.js文件,引入Vue和Vuex.
目录结构:
我是将store属性抽离出去的看个人习惯
index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 导入抽离出去的属性
import store from './store'
Vue.use(Vuex)
export default new Vuex.Store({
...store, //Es6语法展开运算符,将方法展开
modules: {} // 模块化Vuex
})
store.js
// 将属性分离出来便于更好的维护
export default {
state: {},
mutations: {},
actions: {}
}
在main.js中注册
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './styles/base.css'
Vue.config.productionTip = false
new Vue({
router,
store, //注册store 组件中用this.$store访问
render: h => h(App)
}).$mount('#app')
store中的 state,mutation,anction,getter
1.state
在state中定义属性name,给个值 "大仙" ,在组件中使用 this.$store.state.name获取定义的属性name
store.js
// 将属性分离出来便于更好的维护
export default {
state: {
name:'大仙' // 定义的属性
},
mutations: {},
actions: {}
}
Home.vue
<div>
<h2>Home</h2>
{{name}}
</div>
</template>
<script>
export default {
data() {
return {
name:''
};
},
created(){
// this.$store.state.name 获取Vuex中的name值
this.name=this.$store.state.name
console.log(this.name);
}
};
</script>
2.mutation 修改state的唯一方法
修改state只能通过mutation来修改包括action也是通过提交mutation去修改
store.js
//不带参数的方法
changeName(state) {
state.name = '修改后'
},
// 带参数的方法
changeNameparameter(state, value) {
state.name = value
}
},
Home.vue
<div>
<h2>Home</h2>
{{this.$store.state.name}}
<button @click="setName">没有参数</button>
<button @click="setNameParameter('传的参数')">带参数</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
// 不带参数修改
setName() {
this.$store.commit("changeName");
},
// 带参数修改 两种方法
setNameParameter(value) {
// 1.载荷提交
this.$store.commit("changeNameparameter", value);
// 2.对象提交
this.$store.commit({
type:'changeNameparameter',
value
});
}
}
};
</script>
3.anction 异步修改状态
mutation中是不允许异步操作的,如果我们需要异步修改怎么办?于是Vuex为我们提供了action
store.js
// 1.不带参数
changeNameActions(context){
// 异步修改
setTimeout(()=>{
context.commit('changeName')
},1000)
},
// 2.带参数
changeNameActionsParameter(context,value){
// 异步修改
setTimeout(()=>{
context.commit('changeNameparameter',value)
},1000)
}
}
Home.vue
<div>
<h2>Home</h2>
{{this.$store.state.name}}
<button @click="setName">没有参数</button>
<button @click="setNameParameter('传的参数')">带参数</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
// 不带参数修改
setName() {
this.$store.dispatch("changeNameActions");
},
// 带参数修改 两种方法
setNameParameter(value) {
// 1.载荷提交
this.$store.dispatch("changeNameActionsParameter", value);
// 2.对象提交
this.$store.dispatch({
type:'changeNameActionsParameter',
value
});
}
}
};
</script>
4.getter
getter，我们可以理解为是对store中state的一些派生状态，也可以理解为一种计算属性，因为它像计算属性一样，返回值会根据它的依赖被缓存起来，且依赖对象发生改变的时候它才会被重新计算
store.js
// 1.不带参数
changeNameGetter:(state)=>{
if(state.name==='大仙'){
return state.name+'1111'
}
},
// 2.带参数
changeNameGetterParameter:(state)=>(value)=>{
if(state.name==='大仙'){
return state.name+" "+value
}
}
}
Home.vue
<div>
<h2>Home</h2>
{{this.$store.getters.changeNameGetter}}
{{this.$store.getters.changeNameGetterParameter('传的参数')}}
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
