Operaciones de mutación y estado simple de Vuex (crear almacén, modificar almacén, leer almacén, calcular atributos)

Crear almacén vuex

1. Cree un directorio de tienda en src y cree un archivo index.js en el directorio
2. El estado almacena atributos, las mutaciones proporcionan métodos para modificar atributos

import Vue from 'vue'
import 'es6-promise/auto'
import Vuex from 'vuex'

Vue.use(Vuex)

const store=new Vuex.Store({
    
    //创建一个vuex的仓库

    state:{
    
    
      str:"hello world",
      count:"999"
    },getters:{
    
    
      //带参数必须是用箭头函数，注意箭头函数不能使用this
      getStr:(state)=>(iden)=>{
    
    
        //如果返回值==0，返回str的反转且大写的值
        let str=state.str.split('').reverse().join('');
        if(iden==0){
    
    
          str=str.toUpperCase();
        }
        return str;
      }
    },mutations:{
    
    //用来改变state中的数据的
      changestr(state){
    
    
        state.str="world hello";
      },increment(state,data){
    
    
        state.str=data.params.str;
        state.count=data.params.count;
      }
    }, strict: true
  
  });

  export default store//导出仓库

2. Introduzca el archivo store / index.js en main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'//引入store

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  store,
  components: {
    
     App },
  template: '<App/>'
})

Leer y modificar el valor del almacén vuex en el componente.

<template>
  <div class="hello">
    <!-- 直接使用this.$store.state.属性名进行访问 -->
    第一种访问方式:{
    
    {
    
     this.$store.state.str }}----{
    
    {
    
     this.$store.state.count }}<br />
    <!-- 采用辅助函数进行访问 -->
    第二种访问方式:{
    
    {
    
     str }}----{
    
    {
    
     count }}<br />
    <input type="text" v-model="bstr" /><br />
    <input type="text" v-model="bcount" /><br />
    <button @click="click()">修改</button><br>
    {
    
    {
    
    this.$store.getters.getStr(1)}}<br />
    {
    
    {
    
    this.$store.getters.getStr(0)}}
    <hr>
    <HelloWorld1></HelloWorld1>
  </div>
</template>

<script>
//vuex提供了一批辅助函数，来简化对于vuex的操作
import {
    
     mapState } from "vuex";
import HelloWorld1 from "./HelloWorld1"

export default {
    
    
  data() {
    
    
    return {
    
    
      bstr: "",
      bcount: "",
    };
  },
  components:{
    
    
    HelloWorld1
  },
  computed: {
    
    
    ...mapState(["str", "count"]),
  },
  methods: {
    
    
    click() {
    
    
      let that = this;
      this.$store.commit({
    
    
        type: "increment",
        //对象风格提交
        params: {
    
    
          str: that.bstr,
          count: that.bcount,
        },
      });
    },
  },
};
</script>

Subpágina

<template>
  <div>
    第一种访问方式:{
    
    {
    
     this.$store.state.str }}----{
    
    {
    
     this.$store.state.count }}<br />
  </div>
</template>>