怎么用vuex

这篇文章是关于如何使用vuex。我觉得边肖挺实用的，就分享给大家参考，和边肖一起来看看。

首先附上官方文件，

https://vuex.vuejs.org/guide/modules.html

新项目我就不多说了。使用vue-cli，我选择了typescript和class作为新项目的选项，这也与react的class模式非常相似。然后，我将继续下一步，项目将自动为您成功创建。我很担心它是否可用。

根据提示运行npm运行服务，会出现熟悉的界面：

没必要这么说。让我们言归正传。事实上，vuex已经自动集成。

并创建了store.tsimportVuefrom 'vue

importVuexfrom 'vuex

vue . use(Vuex)；

exportdefaultnewVuex。商店({ 0

状态：{

名称：'HelloWord '，

count:1，

用户：[

{姓名：''，年龄：18}，

{姓名： '小刘'，年龄：18}，

{姓名： '小王'，年龄：11}，

{姓名： '小张'，年龄：18}，

{姓名： '小鹏'，年龄：18}，

{姓名： '萧蔷'，年龄：19}，

{姓名： '孩子'，年龄：20}，

]

},

突变：{

增量(状态，有效负载){ 0

//mutatestate

state . count=payload . count；

},

},

getters:{

getAges:(状态)={ 0

returnstate.users.filter(用户={ 0

return user . age 18；

});

（=NationalBureauofStandards）国家标准局

p; }
},
actions: {
},
});

(稍微添加了点东西)；
那么我们在页面上怎么用他呢？
只需要引入 store.ts 然后 store.state 就可以获取state了
以HelloWorld.vue 为例

<template>
  <div class="hello">
    <template>
      <el-radio v-model="checkTest" @change="clickHandle" label="1">备选项</el-radio>
      <el-radio v-model="checkTest" @change="clickHandle" label="2">备选项</el-radio>
    </template>
  </div>
</template>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import store from "./../store";
import Combilestore from "../combineStore";
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  data() {//data 直接定义
    //数据
    return {
      checkTest: "1"
    };
  }
  //以前包裹在methods里面，现在可以独立出来
  clickHandle(val) {
    //调用vuex的commit 方法提交mutations 更新state
    //输出获取state store.state 这个应该和react 几乎一模一样
    console.log(store.state.checkTest);
    store.commit("setCheckedVal", { val: "1" });
  }
  //生命周期
  mounted() {
    console.log(store.state.checkTest);
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h4 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

getters 是对state的一些过滤操作，如果想要改变state 就执行store.commit 方法

第一个参数是mutations名称 在store的 mutations 下定义。

第二个参数是传递的参数 类似react-redux 的 actions。

现在都是在一个store文件上定义所有state ，当项目越来越大的时候如果还采用这种方式，那么store必定越来越大，有没有什么办法优化呢？当然有那就是Modules
官网例子

新建一个store 取名 combineStore.ts：

 import Vue from 'vue';
import Vuex from 'vuex';
const moduleA = {
    state: { name: "moduleA" },
    mutations: {},
    actions: {},
    getters: {}
}
const moduleB = {
    state: { name: "moduleB" },
    mutations: {},
    actions: {}
}
const Combilestore = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})
// store.state.a // -> `moduleA`'s state
// store.state.b // -> `moduleB`'s state
export default Combilestore;

在组件中引入就可以用了：

import Combilestore from "../combineStore";

用法和普通store 并无区别

还可以整合elementUi

main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
//引入elementui
import ElementUI from 'element-ui';
//引入样式
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

感谢各位的阅读！关于“怎么用vuex”这篇文章就分享到这里了，希望