Vuex的使用

1.安装插件

npm install vuex --save

 

2.src/store/index.js中

import vue from 'vue'
import vuex from 'vuex'

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
　　//  保存状态
　　state: {
　　　　counter:1000,
　　　　students:[
　　　　　　{id:110,name:'张三',age:19},

　　　　　　{id:111,name:'李四',age:20},

　　　　　　{id:112,name:'王五',age:21}

　　　　],
　　　　info:{
　　　　　　name:'kobe',
　　　　　　age:40,
　　　　　　height:1.98
　　　　}　　　
　　},

　　mutations: {
　　　　// 方法
　　　　[INCREMENT](state){ //官方建议用这种方式
　　　　　　state.counter++
　　　　},
　　　　[DECREMENT](state){ //官方建议用这种方式

　　　　　　state.counter--
　　　　},
　　　　incrementCount(state,payload){ //官方不建议用这种方式
　　　　　　// 1.普通的提交封装
　　　　　　// state.counter += count // 这里参数用count(payload参数位置）
　　　　　　// 2.特殊的提交封装
　　　　　　console.log(payload)
　　　　},
　　　　addStudent(state,stu){
　　　　　　state.students.push(stu)
　　　　},
　　　　updateInfo(state){
　　　　　　// state.info.name = '陈七'
　　　　}
　　},
　　actions: {
　　　　// context：上下文
　　　　aUpdateInfo(context,payload){
　　　　　　//setTimeout(() => {
　　　　　　　　// 要执行mutations里的修改方法
　　　　　　　　// context.comimit('updateInfo')
　　　　　　　　// console.log(payload.message)
　　　　　　　　// payload.success()
　　
 　　　　　　　　// console.log(payload)
　　　　　　　　　　

　　　　　　//},1000)

　　　　　　return new Promise((resolve,reject)=>{
　　　　　　　　setTimeout(() => {
　　　　　　　　　　context.commit('updateInfo');
　　　　　　　　　　console.log(payload);
　　　　　　　　　　resolve('11111')
　　　　　　　　},1000)
　　　　　　})

　　　　}
　　},
　　getters: {
　　　　// state里的数据必须经过一系列变化之后
　　　　powerCounter(state){
　　　　　　return state.counter * state.counter　　　

　　　　},
　　　　more20stu(state) {
　　　　　　return this.$store.state.students.filter(s => s.age > 20)　
　　　　 },

　　　　more20stuLength(state,getters) {
　　　　　　return getters.more20stu.length
　　　　 },
　　　　moreAgeStu(state) {

　　　　　　// return function(age){
　　　　　　　　// return state.students.filter(s => s.age > age)
　　　　　　// }
　　　　
　　　　　　return age => { 
　　　　　　　　reutrn state.students.filter(s => s.age > age)
　　　　　　}
　　　　 },

　　},
　　modules: {

　　},
})

// 3.导出store对象
export default store

 src/store/mutation-type.js中

export const INCREMENT = 'Iincrement' //官方建议用这种方式

export const DECREMENT= 'decrement' //官方建议用这种方式

 

3.main的js中

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip=false

new Vue({
    el:'#app',
    store,
    render:h => h(App)
})

 

4.页面使用：$store.state.counter

devtools vue开发的一个浏览器插件

<template>
  <div>
     <h2>{{$store.state.counter}}</h2>
     <button @click="addition">+</button>
     <button @click="subtraction">-</button> 

　　  <button @click="addCount(5)">+5</button>  
　　  <button @click="addStudent">添加学生</button>

　　  <h2>{{ $store.getters.powerCounter }}</h2>
　　　<h2>{{ $store.getters.more20stu }}</h2>　　 
　　  <h2>{{ $store.getters.more20stuLength}}</h2>
　　  <h2>{{ $store.getters.moreAgeStu(8)}}</h2>
　　　<h2>------App内容：info对象的内容是否是响应式-----</h2>
　　　<h2>{{ $store.state.info }}</h2>
　　　<button @click="updateInfo">修改信息</button>


  </div>
</template>


<script>
import {iNCREMENT,DECREMENT} from './store/mutations-types.js'
export default {
  name: 'Untitled-1',
  data() {
    return {
      
    }
  },
　// computed:{
　//　more20stu() {
　　　//　return this.$store.state.students.filter(s => s.age > 20)
　　// }　　
　// },
  methods:{
    // 加
    addition(){
      this.$store.commit(INCREMENT) //官方建议用这种方式
    },
    // 减
    subtraction(){
      this.$store.commit(DECREMENT)
    },
　　// 任意数字的增减
　　addCount(count){
　　　　// payload 负荷，负载
　　　　// 1.普通的提交封装
　　　　this.$store.commit('incrementCount',count) //官方不建议用这种方式
 
　　　　// 2.特殊的提交封装
　　　　this.$store.commit({
　　　　　　type:'incrementCount',
　　　　　　count:count
　　　　})
　　},
　　addStudent(){
　　　　const stu = {id:114,name:'Jack',age:27}
　　　　this.$store.commit('addStudent',stu)
　　},
　　updateInfo(){
　　　　// this.$store.commit('updateInfo')
 
　　　　// 模拟异步
　　　　// this.$store.dispatch('aUpdateInfo',{
　　　　　　// message:'我是携带的信息',
　　　　　　// success:()=>{
　　　　　　　　// console.log('里面已经完成了')
　　　　　　// }
　　　　// })


　　　　// 模拟异步
　　　　this.$store.
　　　　　　dispatch('aUpdateInfo','我是携带的信息').then(res => {
　　　　　　　　// 里面完成了提交请求
　　　　　　　　console.log(res); // --11111
　　　　　　})

　　}
  }
}
</script>

 

 

 

 

 

 

 

 

 

谷歌浏览器--》应用商店--》devtools(下载安装）    安装完成重启可以查看state状态（看截图）