Vue2笔记(六)vuex

vuex

什么是xuex

官方解释：
vuex是一个专门为vue.js开发的状态管理模式
vuex也集成到vue的官方调试工具devtools extiension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能

状态管理到底是什么？
状态管理模式，集中式存储管理等，可以简单地将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后将这个对象放在顶层的vue实例中，让其他组件可以使用。

可以把状态管理看做是一个公共变量的管理。这个公共变量是事实可更新的。有点类似于vue实例里面的data这里可实时（响应式）更新的

管理什么状态呢？（使用场景）
软件中如果有多个状态，在多个界面间需要共享数据
如用户的登录状态、用户名称、头像、地理位置信息等（如商城里面商品的收藏，购物车中的物品等。）这些状态信息，都可以放在统一的地方，对他进行保存和管理，并且这些信息还都是响应式的

临时插入点思考：

• 1、其实不论是xx.vue组件还是xx.js脚本都在做一件事，就是往外导出export模块，这些导出的模块最终全部要被主入口脚本main.js导入（import）并挂载
• 2、在main.js中导入（注册）的这些模块（路由router，仓库store）又能被各页面通过$router, $stored等魔术变量所拿到，然后把这些模块所包含的data，computed，components，methods等所使用
• 3、main.js作为主入口的脚本，最终也要挂载到首页（el:’#App’）,因为vue是一个单页面富应用的东西

单界面的状态管理

原理图
从view视图中产生一个actions（如实践），改变状态（如数据改变），状态的改变直接影响view的呈现

• 1、安装vuex

项目目录下安装，cmd命令

npm install vuex --save

• 2、在路由中创建新的路由并use这个插件
  创建一个新的文件夹store，并在store里创建myindx.js（默认访问的话可以创建index.js）
  在myindex.js文件中创建store对象

import Vue from 'vue'
import Vuex from 'vuex'

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

//2、创建vuex对象
const store = new Vuex.Store({
   
  //在store里面放置的对象
  //状态
  state: {
   
    counter:1000//数据实际存放在这个state对象的counter里
  },
  mutations: {
   

  },
  actions: {
   

  },
  getters: {
   

  },
  modules: {
   

  }
})

//3、导出store对象
export default store;

• 3、在main.js里注册store对象
  只有在main里面注册了，才能个在各个页面中拿到这个对象

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/myindex'//如果不指定具体文件名则默认导入store目录下的

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  router,
  store,//在main里面注册了，才能个在各个页面中拿到这个
  render: h => h(App)
})

• 4、创建一个HelloVuex.vue组件
  HelloVuex.vue和App.vue组件都要拿到刚才store对象里state中的counter
  调用公共变量使用$store.state.counter

HelloVuex.vue

<template>
  <div>
    <h2>{
   {
   $store.state.counter}}</h2>
  </div>
</template>
<script>
export default {
   
  name:'HelloVuex',
 
}
</script>
<style scoped>

</style>

App.vue
调用公共变量使用$store.state.counter

<template>
  <div id="app">
    <h2>{
   {
   message}}</h2>
    <h2 >{
   {
   $store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex ></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
   
  name: 'App',
  data(){
   
    return{
   
      message:'我是app组件',
      counter:0
    }
  },
  components:{
   
    HelloVuex
  },
  methods:{
   
    addCounter(){
   

    },
    jianCounter(){
   

    },
  }
}
</script>

<style>

</style>

通过mutation管理状态（state）

在store模块中会 有一个mutations对象，在里面可以放置一些修改state对象内容的方法，这些方法都会包含一个state的参数

以后只要是修改state的内容都必须通过mutation来进行管理（修改）

修改mutation的内容需要使用commit方法，commit带俩参数

• 1、在上例基础上修改myindex.js

在store对象里添加mutations对象，并且添加两个方法，这两个方法修改state对象中的counter

import Vue from 'vue'
import Vuex from 'vuex'

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

//2、创建vuex对象
const store = new Vuex.Store({
   
  //在store里面放置的对象
  //状态
  state: {
   
    counter:1000
  },
  mutations: {
   
    //可以定义方法，方法会有一个默认的state参数
    increment() {
    
      this.state.counter++
    },
    decrement() {
    
      this.state.counter--
    }

  },
  actions: {
   

  },
  getters: {
   

  },
  modules: {
   

  }
})

//3、导出store对象
export default store;

• 2、在上例基础上修改app.vue
  在methods里填写事件回调函数的代码

  methods:{
   
    addCounter(){
   
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment');//increment
    },
    jianCounter(){
   
      //其实就是通过commit来提交一个函数，这个函数恰恰又是在修改state的内容
      this.$store.commit('decrement');

    },
  }

完整app.vue如下

<template>
  <div id="app">
    <h2>{
   {
   message}}</h2>
    <h2 >{
   {
   $store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex ></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
   
  name: 'App',
  data(){
   
    return{
   
      message:'我是app组件',
      counter:0
    }
  },
  components:{
   
    HelloVuex
  },
  methods:{
   
    addCounter(){
   
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment');//increment
    },
    jianCounter(){
   
      //其实就是通过commit来提交一个函数，这个函数恰恰又是在修改state的内容
      this.$store.commit('decrement');

    },
  }
}
</script>

<style>

</style>

vuex的核心概念

State：状态。对应store仓库。了解单一状态树
Getters：读state里的数据（计算之后读取，当然也可以原封不动地读）
Mutations：
Action：异步状态的mutations
Module：

getters可以看做vue实例的compute属性，
mutations可以看做是vue实例的methods属性

单一状态树

单一状态树：Single Source of Truth，也可以翻译成单一数据源
其核心思想就是不要让数据分布在各个仓库（store）里，而是只用一个store来存储

Getters基本使用

1、myindx.js中创建getters里面的数据修改方法

myindx.js

getters: {
   
    //这里也有一个默认的state参数
    powerCount(state) {
    
      return state.counter*state.counter
    }
  },

完整代码

import Vue from 'vue'
import Vuex from 'vuex'

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

//2、创建vuex对象


const store = new Vuex.Store({
   
  //在store里面放置的对象
  //状态
  state: {
   
    counter:1000
  },
  mutations: {
   
    //可以定义方法，方法会有一个默认的state参数
    increment() {
    
      this.state.counter++
    },
    decrement() {
    
      this.state.counter--
    }

  },
  actions: {
   

  },
  getters: {
   
    //这里也有一个默认的state参数
    powerCount(state) {
    
      return state.counter*state.counter
    }
  },
  modules: {
   

  }
})

//3、导出store对象
export default store;

2、app中是使用getters

<template>
  <div id="app">
    <h2>{
   {
   message}}</h2>
    <h2 >{
   {
   $store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex></hello-vuex>
    <h2 >App内容：演示getters相关信息</h2>
    <h2>{
   {
   $store.getters.powerCount}}</h2>
  </div>
</template>

完整代码

<template>
  <div id="app">
    <h2>{
   {
   message}}</h2>
    <h2 >{
   {
   $store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex></hello-vuex>
    <h2 >App内容：演示getters相关信息</h2>
    <h2>{
   {
   $store.getters.powerCount}}</h2>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
   
  name: 'App',
  data(){
   
    return{
   
      message:'我是app组件',
      counter:0
    }
  },
  components:{
   
    HelloVuex
  },
  methods:{
   
    addCounter(){
   
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment');//increment
    },
    jianCounter(){
   
      //其实就是通过commit来提交一个函数，这个函数恰恰又是在修改state的内容
      this.$store.commit('decrement');

    },
  }
}
</script>

<style>

</style>

案例2，在以上基础上
myindex.js

import Vue from 'vue'
import Vuex from 'vuex'

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