Vuex的创建和简单使用

Vuex

1.简介

1.1简介

1.框框里面才是Vuex

• state：状态数据
• action：处理异步
• mutations：处理同步，视图可以同步进行渲染

1.2项目创建

1.vue create 名称

2.运行后

3.下载vuex。采用的是基于vue2的版本。

npm install vuex@3 --save

4.vue项目采用的是npm run serve 的运行的方式

1.3配置方式

1.src下创建index.js用于配置store

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

// 创建Vuex对象
const store = new Vuex.Store({
    //简单数据： 保存的全局状态变量
    state: {
        count: 1,
        app: "Vuex的学习"
    },
    // 改变数据
    mutations: {

    }
// 导出vuex
export default store
// 如果想使用的话必须去main.js中进行引用

2.main.js设置

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

Vue.config.productionTip = false

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

1.4获取数据的方式

1.$store.state.名称 获取的是全部的状态变量

2.采用导入的方式

//mapState讲store中的state映射到计算属性
import { mapState } from 'vuex';

需要在计算属性中进行获取store中的数据

• 一种是()中直接写[]
• 可以起别名采用{}的形式

 // 计算属性
  computed: {
    // 写法1
    ...mapState(
      ['count', 'app']
    ),
    // 写法2
    ...mapState({
      c: 'count', //相当于给count起了一个别名
      a: "app"
    }),
  }

3.界面展示

 <!-- 第一种方式 -->
    <div>
      获取store的第一种方式：{{ $store.state.count }}
    </div>

<div>
      获取store的第二种方式：
      {{ app }}
      {{ count }}
      <br>
      {{ c }}

      {{ a }}
    </div>

4.效果图

2.进阶

直接上代码，简单点用即可

1.store/index.js中导入了一个product的store自定义模块

import Vuex from 'vuex'
import Vue from 'vue'
import product from './product'
Vue.use(Vuex)

// 创建Vuex对象
const store = new Vuex.Store({
    //简单数据： 保存的全局状态变量
    state: {
        count: 1,
        app: "Vuex的学习"
    },
    // 改变数据
    mutations: {

    }
    ,

    // 复杂数据：当保存的是复杂的数据的时候
    // 一个单独的模块，每一个模块中的action，mutation和state都需要全部重新写
    modules: {
        //  采用模块引入的方式
        product,
    }
})
// 导出vuex
export default store
// 如果想使用的话必须去main.js中进行引用

2.子模块数据

export default
    // product是自定义的命名空间名称
    {
        namespaced: true,
        //全局数据
        state: {
            list: [1, 2, 3, 4, 5]
        },

        //同步： 改变数据
        mutations: {
            addList(state, payload) { //state是当前模块的数据(表示调用的时候传入的参数),payload是参数
                state.list.push(payload)
            }
        },
        // 异步：改变数据，不建议
        actions: {
            addList2(context, payload) { //state是当前模块的数据(表示调用的时候传入的参数),payload是参数
                // context.state.list.push(payload)  //保存的信息不会被记录下来
                context.commit('addList', payload) //可以被追踪到

            }
        }

    }

3.界面引用

<template>
  <div>
    <!-- 第一种方式 -->
    <div>
      获取store的第一种方式：{{ $store.state.count }}

    </div>

    <div>
      获取store的第二种方式：
      {{ app }}
      {{ count }}
      <br>
      {{ c }}

      {{ a }}
    </div>

    <!-- 获取不同模块中的数据 -->
    <div>
      获取不同模块中的数据{{ list }}
    </div>

    <!--同步 改变状态变量中的数据 -->
    <div>
      <input type="text" @keyup.enter="addClick" placeholder="回车确认信息" v-model="value">
    </div>

    <!-- 异步 改变状态变量中的数据 -->
    <div>
      <input type="text" @keyup.enter="addClick2" placeholder="回车确认信息" v-model="value2">
    </div>

    <!-- 异步 改变状态变量中的数据 -->
    <div>
      <input type="text" @keyup.enter="addClick3" placeholder="回车确认信息" v-model="value3">
    </div>
  </div>
</template>

<script>
//mapState讲store中的state映射到计算属性
import { mapState } from 'vuex';
// mapMutations将store中的方法映射到methods
import { mapMutations } from 'vuex';
// mapActions把vuex中的actions映射到methods
import { mapActions } from 'vuex';
export default {
  name: 'helloWorld',
  // 数据
  data() {
    return {
      value: "",
      value2: "",
      value3: ''
    }
  },
  // 方法
  methods: {
    ...mapMutations(
      'product',//声明的命名空间
      ['addList'] //命名空间store中的方法
    ),
    ...mapActions(
      'product',//声明的命名空间
      ['addList2'] //命名空间store中的方法
    ),


    //同步：改变数据
    addClick() {
      // console.log(this.value); //打印测试信息
      this.addList(this.value) //直接调用mutation中的方法

    },
    //异步：改变数据
    addClick2() {
      this.addList2(this.value2)
    },

    //直接写
    addClick3() {
      //采用/的方式指定命名空间
      this.$store.commit('product/addList', this.value3)
    }
  },
  // 计算属性
  computed: {
    // 写法1
    ...mapState(
      ['count', 'app']
    ),
    // 写法2
    ...mapState({
      c: 'count', //相当于给count起了一个别名
      a: "app"
    }),

    // 导入别的模块中的数据
    ...mapState(
      'product', //命名空间名称
      ['list'] //state状态变量中的数据
    )
  }
}
</script>

<style></style>

4.效果图

3.注意点

state中保存的是全局的数据

改变state中的数据推荐使用的是mapMutations，改变的数据会被记录而且界面会时时的刷新和显示

mapActions采用的是异步的方式，不会留下记录的

而且在定义的时候改变数据的方式mutations是state的方式而actions的是context的方式

1.注意点

• 导入

//mapState讲store中的state映射到计算属性
import { mapState } from 'vuex';
// mapMutations将store中的方法映射到methods
import { mapMutations } from 'vuex';
// mapActions把vuex中的actions映射到methods
import { mapActions } from 'vuex';

• 获取

  // 计算属性
  computed: {
    // 写法1
    ...mapState(
      ['count', 'app']
    ),
    // 写法2
    ...mapState({
      c: 'count', //相当于给count起了一个别名
      a: "app"
    }),

    // 导入别的模块中的数据
    ...mapState(
      'product', //命名空间名称
      ['list'] //state状态变量中的数据
    )
  }
  
  // 方法
  methods: {
    ...mapMutations(
      'product',//声明的命名空间
      ['addList'] //命名空间store中的方法
    ),
    ...mapActions(
      'product',//声明的命名空间
      ['addList2'] //命名空间store中的方法
    ),
    ........
}