npm install vuex --save
import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);//2. 创建vuex对象
const store = new Vuex.Store({
state: {}, mutations: {}, actions: {}, getters: {}, modules: {}})//3. 导出story对象
export default store;
import Vue from 'vue'
import App from './App'
import router from './router'
//引入 vuex 的store对象
import store from "./store";
Vue.config.productionTip = falsenew Vue({ el: '#app',
router, store, render: h => h(App)})
import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);//2. 创建vuex对象
const store = new Vuex.Store({
state: { //定义被vuex管理的各个状态
counter: 10
}, mutations: {//定义方法用于修改vuex管理的状态
increment(state){ state.counter++; }, decrement(state){ state.counter--; } }, actions: {}, getters: {}, modules: {}})//3. 导出story对象
export default store;
<template>
<div id="app">
<h3>{{$store.state.counter}}</h3>
<!--操作vuex管理的状态-->
<button @click="addition">+</button>
<button @click="subtration">-</button>
<hr>
<hello-vuex/>
</div>
</template>
<script>
import HelloVuex from "./components/HelloVuex";
export default {
name: 'App',
components:{
HelloVuex
},
methods:{
addition(){
//通过mutation修改被vuex管理的状态
this.$store.commit('increment')
},
subtration(){
//commit()传入的是在index.js中mutations中定义的方法名
this.$store.commit('decrement')
}
}
}
</script>
import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);
//2. 创建vuex对象
const store = new Vuex.Store({
state: { //定义被vuex管理的各个状态
students: [
{id: 1, name: 'bob', age: 18},
{id: 2, name: 'kobe', age: 22},
{id: 3, name: 'xyx', age: 25},
{id: 4, name: 'john', age: 17}
]
},
getters: {
//这里定义的是state中变化后的内容
more20stu(state){
return state.students.filter(s => s.age > 20);
}
}
})
//3. 导出story对象
export default store;
<template>
<div id="app">
<p>getters中定义的powerConter内容----</p>
<h3>{{$store.getters.powerConter}}</h3>
<p>通过getters 中的more20stu 获取state中age大于20的对象---</p>
<!--通过getters拿到变化后的store中的内容-->
{{$store.getters.more20stu}}</div>
</template>
<script>
export default {
name: 'App',
}
</script>
import Vue from "vue";
import Vuex from "vuex"
//1. 安装插件
Vue.use(Vuex);
//2. 创建vuex对象
const store = new Vuex.Store({
state: {
counter: 10,
students: [
{id: 1, name: 'bob', age: 18},
{id: 2, name: 'kobe', age: 22},
{id: 3, name: 'xyx', age: 25},
{id: 4, name: 'john', age: 17}
]
},
getters: {
more20stu(state){
return state.students.filter(s => s.age > 20);
},
//传入的第二个参数代表就是当前对象中的getters
more20stuLenthg(state,getters){
return getters.more20stu.length;
}
},
})
//3. 导出story对象
export default store;
<template>
<div id="app">
<p>通过getters 中的more20stu 获取state中age大于20的对象---</p>
{{$store.getters.more20stu}} <p>getters 作为参数</p>
<h3>{{$store.getters.more20stuLenthg}}</h3>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
const store = new Vuex.Store({
state: { //定义被vuex管理的各个状态
counter: 10,
students: [
{id: 1, name: 'bob', age: 18},
{id: 2, name: 'kobe', age: 22},
{id: 3, name: 'xyx', age: 25},
{id: 4, name: 'john', age: 17}
]
},
getters: {
//获取年龄大于 age 的学生,这个Age不是写死的,而且别的地方传入进来的
moreAgeStu(state) {
//返回一个函数
return function (age) {
return state.students.filter(s => s.age > age);
}
}
}
})
//3. 导出story对象
export default store;
<template>
<div id="app">
<p>getters 传递参数----</p>
<!--传入一个22给getters中定义的方法,这个方法返回一个函数,这个22就是函数的参数-->
<p>{{$store.getters.moreAgeStu(22)}}</p>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
mutations: {
increment(state){ state.count++; }}
increment: function(){
this.$stote.commit('increment')
}
mutations: {
// 第二个参数是外部传入的
incrementCount(state,count){
state.counter += count;
}
},
<template>
<div id="app">
<p>mutations 传递参数----</p>
<h4>{{this.$store.state.counter}}</h4>
<button @click="addCount(5)">+5</button>
<button @click="addCount(10)">+10</button>
</div>
</template>
<script>
export default {
name: 'App'
methods:{
addCount(count){
//提交,并传入参数
this.$store.commit('incrementCount',count);
}
}
}
</script>
addStu(){
const stu = {id: 5, name: 'alan', age:30};
this.$store.commit('addSutdent',stu);
}
addCount(count){
//普通的提交风格 //this.$store.commit('incrementCount',count);
//特殊的提交风格 this.$store.commit({
type: 'incrementCount',
count })},
mutations: {//定义方法用于修改vuex管理的状态
incrementCount(state,payload){
state.counter += payload.count;
}
}
<template>
<div id="app">
<p>store.state.info的内容是否是响应式的-------</p>
<button @click="updateInfo">修改 info</button>
<h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
//修改info对象,并且是响应式的
updateInfo(){
this.$store.commit('updateInfo')
}
}
}
</script>
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);const store = new Vuex.Store({
state: { //定义被vuex管理的各个状态
info: { name: 'xiaoyouxin',
age: 25,
height: 1.75
} }, mutations: {//定义方法用于修改vuex管理的状态
//通过Vue.set(obj, key, value) 响应式的修改info的信息
updateInfo(state){ Vue.set(state.info, 'addr', '重庆');
} } })export default store;
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);const store = new Vuex.Store({
state: { //定义被vuex管理的各个状态
info: { name: 'xiaoyouxin',
age: 25,
height: 1.75
} }, mutations: {//定义方法用于修改vuex管理的状态
deleteInfo(state){ //删除属性该方式做不到响应式
// delete state.info.name;
Vue.delete(state.info, 'name');
} } })export default store;
export const INCREMENT = 'increment';
export const INCREMENTCOUNT = 'incrementCount';
export const DECREMENT = 'decrement';
export const ADDSTUDENT = 'addSutdent';
export const UPDATEINFO = 'updateInfo';
export const DELETEINFO = 'deleteInfo';
import Vue from "vue";
import Vuex from "vuex"// 引入这些常量import { INCREMENT,DELETEINFO,DECREMENT,ADDSTUDENT,UPDATEINFO,INCREMENTCOUNT} from './mutations-types'Vue.use(Vuex);const store = new Vuex.Store({ state: { //定义被vuex管理的各个状态 counter: 10, students: [ {id: 1, name: 'bob', age: 18},
{id: 2, name: 'kobe', age: 22},
{id: 3, name: 'xyx', age: 25},
{id: 4, name: 'john', age: 17}
],
info: { name: 'xiaoyouxin', age: 25, height: 1.75 } }, mutations: { //修改方法名为 : [常量](){} 的方式
[INCREMENT](state) {
state.counter++; }, [DECREMENT](state) {
state.counter--; }, [INCREMENTCOUNT](state,payload){
state.counter += payload.count; }, [ADDSTUDENT](state,stu){
state.students.push(stu); }, [UPDATEINFO](state){
Vue.set(state.info, 'addr', '重庆'); }, [DELETEINFO](state){
Vue.delete(state.info, 'name'); } }})export default store;
<template>
<div id="app">
<p>mutations 传递参数----</p>
<h4>{{this.$store.state.counter}}</h4>
<button @click="addCount(5)">+5</button>
<button @click="addCount(10)">+10</button>
<p>mutations 传递参数2----</p>
<button @click="addStu">添加学生</button>
{{$store.state.students}} <p>store.state.info的内容是否是响应式的-------</p>
<button @click="updateInfo">修改 info 添加属性</button>
<h2>{{$store.state.info}}</h2>
<button @click="deleteInfo">修改 info 删除属性</button>
<h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
import HelloVuex from "./components/HelloVuex";
//引入常量
import {
INCREMENTCOUNT, ADDSTUDENT, UPDATEINFO, DELETEINFO
} from "./store/mutations-types"
export default {
name: 'App',
methods:{
addCount(count){
this.$store.commit({
type: INCREMENTCOUNT,
count
})
},
addStu(){
const stu = {id: 5, name: 'alan', age:30};
//使用常量作为commit提交的参数
this.$store.commit(ADDSTUDENT,stu);
},
updateInfo(){
//使用常量作为commit提交的参数
this.$store.commit(UPDATEINFO)
},
deleteInfo(){
this.$store.commit(DELETEINFO);
}
}
}
</script>
<style>
</style>
import Vue from "vue";
import Vuex from "vuex"
import {
INCREMENT,DELETEINFO,DECREMENT,ADDSTUDENT,UPDATEINFO,INCREMENTCOUNT} from './mutations-types'
Vue.use(Vuex);const store = new Vuex.Store({
state: { //定义被vuex管理的各个状态
info: { name: 'xiaoyouxin',
age: 25,
height: 1.75
} }, mutations: { [UPDATEINFO](state){ Vue.set(state.info, 'addr', '重庆');
} }, actions: { //在actions中定义的函数中异步调用mutations中的方法
aUpdateInfo(context){ setTimeout(() => {
context.commit(UPDATEINFO) },1000)
} }})export default store;
<template>
<div id="app">
<button @click="updateInfo">修改 info 添加属性</button>
<h2>{{$store.state.info}}</h2>
</div>
</template>
<script>
import {
INCREMENTCOUNT, ADDSTUDENT, UPDATEINFO, DELETEINFO
} from "./store/mutations-types"
export default {
name: 'App',
methods:{
updateInfo(){
//通过 dispatch的方式对state中的属性进行异步操作
this.$store.dispatch('aUpdateInfo')
}
}
}
</script>
注意: action传递参数的方式根mutitaions的方式一致